vue-picker
的组件,包括了(普通选择
、联动选择
、中国地址选择
...)简单配置就可以出现一个强大的picker,感受下效果图。
demo
demo 地址:https://naihe138.github.io/vu...
install
npm install vue-pickers --save
使用
普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用
<template>
<div>
<VuePicker :data="pickData"
@cancel="cancel"
@confirm="confirm"
:showToolbar="true"
:maskClick="true"
:visible.sync="pickerVisible"
/>
</div>
</template>
<script>
import vuePickers from 'vue-pickers'
export default {
components: { vuePickers },
data () {
let tdata = []
for (let i = 0; i < 20; i++) {
tdata.push({
label: `第${i}行`,
value: i
})
}
return {
pickerVisible: false,
pickData: [ tdata ],
result: ''
}
},
methods: {
cancel () {
console.log('cancel')
this.result = 'click cancel result: null'
},
confirm (res) {
this.result = JSON.stringify(res)
console.log(res)
}
},
}
</script>
属性参数说明
事件说明
参数 | 说明 | 是否必须 | 类型 | 默认值 |
---|---|---|---|---|
change | 数据变化事件 | 否 | function(val) | 无 |
cancel | 取消选择 | 否 | function | 无 |
confirm | 确认选择 | 否 | function(val) | 无 |