在vue中实现picker样式_⼀个很好⽤的vue-picker组件vue-picker迅疾
vue-picker的组件，包括了(普通选择、联动选择、中国地址选择...)简单配置就可以出现⼀个强⼤的picker，感受下效果图。demo
install
npm install vue-pickers --save
使⽤
大材小用普通⽹页开发直接复制lib/vue-picker.js⽂件夹到项⽬即可直接使⽤
@cancel="cancel"
@confirm="confirm"
:showToolbar="true"
:maskClick="true"
:visible.sync="pickerVisible"
/>
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: fal,
pickData: [ tdata ],
result: ''
}
},
methods: {
cancel () {
console.log('cancel')
confirm (res) {
一年级上册英语
}
},
}
属性参数说明
参数
说明
是否必须
类型
默认值
visible
显⽰/隐藏picker
是
Boolean
fal
data创意之星
pickerData，多列[data1, data2]
是
Array
[]
layer
联动显⽰列数
否
Number
link
是否开启联动数据
否
Boolean
fal
defaultIndex
不文明现象
默认显⽰的index
否
熔融盐
Number/[](多列⽤数组)⽆
cancelText
取消按钮⽂字
否
String
'取消'
confirmText
去确认按钮⽂字
否
String
'确认'
title
picker标题
失眠自然疗法否
String
''
showToolbar
显⽰头部
否
Boolean
fal
maskClick
遮罩层是否可以点击关闭否
Boolean
fal
itemHeight
每⼀⾏的⾼度
否
Number, String
'44px'
rowNumber
显⽰多少⾏(建议单数)否
Number
5
事件说明
参数
说明近似色
是否必须
类型
默认值
change
数据变化事件
否
function(val)
⽆
cancel
取消选择
否
function
⽆
confirm
确认选择
否
function(val)
⽆
