Picker
选择器,支持多 slot 联动, demo
用法
传入 slots,当被选中的值发生变化时触发 picker-change 事件。picker-change 事件有两个参数,分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组
<picker :slots="years" @picker-change="yearChange" :values="[yearValues]" ></picker>
出生年份: <span style="color:#000;">{{yearValues.text}}</span>
{
data () {
let fullYear = new Date().getFullYear()
let years = []
for (let i = 0; i <= 20; i++) {
years.push({
value: fullYear - i,
text: (fullYear - i) + '年'
})
}
return {
years: [{values: years}],
yearValues: years[10]
}
},
methods: {
yearChange (values) {
this.yearValues = values[0]
}
}
}
API
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
slots | slot 对象数组 | Array | [] | |
values | 选择的值 | Array | [] | |
visibleItemCount | slot 中可见备选值的个数 | Number | 5 |
slot 对象
key | 描述 |
---|---|
divider | 是否是分隔 |
content | 分隔内容 |
textAlign | 对齐方式 |
width | 宽度 |
values | 对应 slot 的备选值数组 |