smirk-ui v0.0.5-alpha

Smirk UI

1. 一个自用的 Vue3 组件库，自由度高、扩展性强、极少的入参。目标是：工作五分钟，摸鱼俩小时！

2. 主要基于 Naive UI 二次封装。包含大屏组件和业务组件等。

   注：开发大屏项目时，可搭配 smirk-kit 使用。其中 useDsCore 数据源引擎，会使交互、接口轮询、数据管理等工作变得非常轻松。（安装 pnpm add smirk-kit）

安装

• 安装依赖，推荐 pnpm

  pnpm add naive-ui smirk-ui
  pnpm add unplugin-vue-components -D

• 配置 vite.config.mjs

  import Components from 'unplugin-vue-components/vite'
  import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
  
  plugins: [
        Components({
            resolvers: [NaiveUiResolver()],
            dirs: [/*目录下的组件会自动导入*/],
            directoryAsNamespaces: true,
        })
  ]

• main.js 中导入smirk-ui

• // 全局安装
  import SmirkUI from 'smirk-ui'
  app.use(SmirkUI)
  // 或者 按需引入
  import { SmViewport } from 'smirk-ui'

组件

sm-viewport

视窗组件。根据屏幕分辨率等比缩放，一般做大屏时候用作根容器。右键菜单默认被禁用。

Props

Slot

sm-transition

过渡组件，或叫转场组件。默认根据路由变化触发动画，使大屏更加酷炫。（依赖 animate.css）

Props

Slot

sm-echarts

渲染 echarts 图表的公共组件。化繁为简，只需关注 option 即可。

Props

示例

<sm-echarts v-model:config="ecMap"></sm-echarts>

// 属性对象
const ecMap = reactive({
    /* 必要参数 */
    option: echarts => null		// 返回图表属性对象的函数

    /* 可选参数 */
    mapType: '',		// 地图名称
    geoJson: null,		// 地图坐标数据
    events: Array,		// 绑定事件 def=[{ type, callback }]
    useSvg: false,		// 是否使用 svg 渲染模式
})

function getOptionFn () {
    return {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    }
}

onMounted(() => {
    // 渲染图表
    ecMap.vmRender()
    /** 注：此刻，ecMap 对象中会增加几个属性，用于操作图表
    		ecMap = {
    			vmBox,		// 这是宿主元素
                vmSelf,		// 这是图表实例，即 myChart
                vmRender,	// 渲染方法，可传入新的 option 进行重绘
                vmClear		// 清除
    		}
    */
})

sm-rolling

基础滚动组件。基于 vue3-seamless-scroll 封装（不是虚拟列表的设计，进行了一些优化）。

仅提供基础的滚动效果。便于开发滚动卡片，滚动指标等一类组件。

能设置滚动方向 nativeOpts.direction = 'up | down | left | right'

Props

Slot

sm-rolling-list

滚动的数据表格组件。为尽可能减少入参，样式可在父组件中设置。

Props

columns Props

Slot

Methods

sm-rolling-num

数字滚动组件。

Props

methods

sm-datetime

当前时间组件。

Props

sm-feedback

反馈组件。naive-ui 的主要通知嘞组件。引入后，可直接使用的 api 组件有：window.$dialog、window.$loadingbar、window.$messager、window.$modal、window.$notice。

sm-multiple-picker

筛选器组件。类似京东商城购买电脑时，那个选择器。多类别、多选、可折叠。

Props

methods