基于Vue的页面控件包

简介

SanmiUI 是一个基于Vue的页面控件包，旨在补充一些开发过程中需要用到的、不容易找到的偏专业或者小众的页面控件，以帮助快速开发。

Ⅰ、年度选择器

安装

• 使用 npm 安装

  npm i sanmi-ui
  

  推荐使用 npm 的方式安装，它能更好地和 webpack (opens new window) 打包工具配合使用。

• 导入 SanmiUI

  在 main.js 中写入以下内容：

  import Vue from 'vue'
  import App from './App.vue'
  import SanmiUI from 'sanmi-ui'
  
  Vue.use(SanmiUI);
  
  new Vue({
    render: h => h(App),
  }).$mount('#app')
  

使用

年度选择器

• 单选模式：

适用于广泛使用的基础单选模式。 通过设置select-mode属性为single可指定单选模式。

点击查看代码

<template>
    <div>
        <year-picker select-mode="single" size="small" v-model="selectValue" />
    </div>
</template>

<script>
export default {
  data() {
    return {
      selectValue: []
    }
  }
}
</script>

• 连续多选：

年度范围选择，在统计同比或者环比数据时，可能需要选择连续的几个年度进行比较，这时就可以使用连续多选模式。 通过设置select-mode属性为range可指定连续多选。

点击查看代码

<template>
    <div>
        <year-picker select-mode="range" size="small" v-model="selectValue" />
    </div>
</template>

<script>
export default {
  data() {
    return {
      selectValue: []
    }
  }
}
</script>

• 任意多选：

任意年度集合选择，在统计同比或者环比数据时，可能需要选择指定的几个不连续的年度进行比较，这时任意多选即派上用场。 通过设置select-mode属性为multiple可指定任意多选。

点击查看代码

<template>
    <div>
        <year-picker select-mode="multiple" size="small" v-model="selectValue" />
    </div>
</template>

<script>
export default {
  data() {
    return {
      selectValue: []
    }
  }
}
</script>

属性说明

参数	说明	类型	可选值	默认值
select-mode	选择模式	string	single, range, multiple	single
size	输入框尺寸	string	large, small, mini	small
value	绑定值	string	—	—

• select-mode 取值

name	说明
single	单选：一次仅选择一个年度
range	范围选：可选择连续的年度范围
multiple	多选：可选择任意年度

• size 取值

name	说明
large	大号的
small	小号的
mini	迷你的