中文 | English
vue-picker
的组件,囊括了(普通选择
、联动选择
、中国地址选择
)等等常见的picker,兼容PC、移动端,通过简单配置就可以出现一个强大的picker,感受下效果图。
Demo(快点去复制代码体验一波吧)
https://naihe138.github.io/vue-picker/index.html
Install
npm install vue-pickers --save
or yarn add vue-pickers
使用
普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用
<template> <div> <button @click="show">show picker</button> <VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm" :visiblesync="pickerVisible" /> </div></template> <script> var tdata = for let i = 0; i < 20; i++ tdata components: VuePicker { return pickerVisible: false pickData: tdata result: '' } methods: { thispickerVisible = true } { thisresult = 'click cancel result: null' } { thisresult = JSON } </script>
属性参数说明
参数 | 说明 | 是否必须 | 类型 | 默认值 |
---|---|---|---|---|
visible | 显示/隐藏picker | 是 | Boolean | false |
data | pickerData,多列[data1, data2] | 是 | Array | [] |
layer | 联动显示列数 | 否 | Number | 0 |
defaultIndex | 默认显示的index | 否 | Number/Array(多列用数组) | 无 |
cancelText | 取消按钮文字 | 否 | String | '取消' |
confirmText | 去确认按钮文字 | 否 | String | '确认' |
title | picker标题 | 否 | String | '' |
showToolbar | 显示头部 | 否 | Boolean | false |
maskClick | 遮罩层是否可以点击关闭 | 否 | Boolean | false |
itemHeight | 每一行的高度 | 否 | Number, String | '44px' |
rowNumber | 显示多少行(建议单数) | 否 | Number | 5 |
appendToBody | 是否插入到body中 | 否 | Boolean | false |
事件说明
参数 | 说明 | 是否必须 | 类型 | 默认值 |
---|---|---|---|---|
change | 数据变化事件 | 否 | function(val) | 无 |
cancel | 取消选择 | 否 | function | 无 |
confirm | 确认选择 | 否 | function(val) | 无 |