Mint UI 选择器-Picker
选择器，支持多 slot 联动。
引入
import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);
例子
传入 slots，当被选中的值发生变化时触发 change 事件。change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<div id="app">
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
methods: {
onValuesChange(picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
}
},
data() {
return {
slots: [
{
flex: 1,
values: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
className: 'slot3',
textAlign: 'left'
}
]
};
}
})
</script>
</html>
尝试一下 »
change 事件
在 change 事件中，可以使用注册到 picker 实例上的一些方法：
-
getSlotValue(index)：获取给定 slot 目前被选中的值 -
setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中 -
getSlotValues(index)：获取给定 slot 的备选值数组 -
setSlotValues(index, values)：设定给定 slot 的备选值数组 -
getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外） -
setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中
slots
绑定到 slots 属性的数组由对象组成，每个对象都对应一个 slot，它们有如下键名
| key | 描述 |
|---|---|
| divider | 对应 slot 是否为分隔符 |
| content | 分隔符 slot 的显示文本 |
| values | 对应 slot 的备选值数组。若为对象数组，则需在 mt-picker 标签上设置 value-key属性来指定显示的字段名 |
| defaultIndex | 对应 slot 初始选中值，需传入其在 values 数组中的序号，默认为 0 |
| textAlign | 对应 slot 的对齐方式 |
| flex | 对应 slot CSS 的 flex 值 |
| className | 对应 slot 的类名 |
API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| slots | slot 对象数组 | Array | [] | |
| valueKey | 当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名 | String | '' | |
| showToolbar | 是否在组件顶部显示一个 toolbar，内容自定义 | Boolean | false | |
| visibleItemCount | slot 中可见备选值的个数 | Number | 5 | |
| itemHeight | 每个 slot 的高度 | Number | 36 |
Slot
| name | 描述 |
|---|---|
| - | 当 showToolbar 为 true 时，toolbar 中的内容 |