中文 | English
A picker componemt for vue2.0
走了一圈 github
都没有找到自己想要的移动端的 vue-picker
的组件,于是自己就下手,撸了一个出来,感受下效果图。
http://gitblog.naice.me/vue-picker/example/index.html#/
npm install vue-pickers --save
or yarn add vue-pickers
<template>
<div>
<button @click="show">show picker</button>
<VuePicker :data="pickData"
:showToolbar="true"
@cancel="cancel"
@confirm="confirm"
:visible.sync="pickerVisible"
/>
</div>
</template>
<script>
import VuePicker from 'vue-pickers'
var tdata = []
for (let i = 0; i < 20; i++) {
tdata.push({
label: '第' + i + '行',
value: i
})
}
export default {
components: {
VuePicker
},
data () {
return {
pickerVisible: false,
pickData: [
tdata
],
result: ''
}
},
methods: {
show () {
this.pickerVisible = true
},
cancel () {
this.result = 'click cancel result: null'
},
confirm (res) {
this.result = JSON.stringify(res)
}
}
}
</script>
参数 | 说明 | 是否必须 | 类型 | 默认值 |
---|---|---|---|---|
change | 数据变化事件 | 否 | function(val) | 无 |
cancel | 取消选择 | 否 | function | 无 |
confirm | 确认选择 | 否 | function(val) | 无 |