vue-awesome-picker
基于 Vue.js & Better-Scroll 的移动端 picker 组件
Features
- 支持单列、多列和联级数据
- 内置时间、日期数据
- 滚轮 3D 效果
- 颜色可配置
Demo
PS:Demo 已启用 Service Worker
Installation
npm install vue-awesome-picker --save
Usage
/* main.js */;Vue;
/* 详细使用方法参照源码 App.vue */<awesome-pickerref="picker":data="picker.data":anchor="picker.anchor":textTitle="picker.textTitle":textConfirm="picker.textConfirm":textCancel="picker.textCancel":colorTitle="picker.colorTitle":colorConfirm="picker.colorConfirm":colorCancel="picker.colorCancel":swipeTime="picker.swipeTime"@cancel="handlePickerCancel"@confirm="handlePickerConfirm"></awesome-picker>
methods:{this$refpicker;}
Props
参数 | 描述 | 可选 | 类型 | 默认 |
---|---|---|---|---|
data | 详细描述见下文 | Array | ||
anchor | 详细描述见下文 | Array | ||
type | 内置 picker 类型 无需传入 data |
date, time | String | |
textTitle | title 文案 | String | ||
textConfirm | confirm 文案 | String | 确定 | |
textCancel | cancel 文案 | String | 取消 | |
colorTitle | title 颜色 | String | #000000 | |
colorConfirm | confirm 颜色 | String | #42b983 | |
colorCancel | cancel 颜色 | String | #999999 | |
swipeTime | 滚动速度(better-scroll swipeTime) | Number | 1800 |
data
vue-awesome-picker 通过数据结构不同来区分是普通 picker 还是联级 picker, 所以请严格按照以下数据结构进行配置
单列、多列 picker 以双层数组的形式传入 data
'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j' 'k' 'l' 'm' 'n' 'o' 'p' 'q' 'r' 's''t' 'u' 'v' 'w' 'x' 'y' 'z''A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O' 'P' 'Q' 'R' 'S''T' 'U' 'V' 'W' 'X' 'Y' 'Z'
联级 picker 通过 children 构造出具有层级关系的数据
value: 'A' children: value: 'A-a' value: 'A-b' value: 'A-c' value: 'B' children: value: 'B-a' value: 'B-b'
anchor
anchor 是 picker 展开时每一列默认滚动的锚点位置或值的数组, 兼容两种数据结构, 未匹配到默认选中第0项
[推荐]数组对象形式: 与事件 confirm 返回的参数数据结构相同, 对象里可以只存在 index 或 value, 当存在 index 时优先匹配 index
index: 0 value: 'A' index: 0 value: 'A-a'
单层数组形式: index 组成的数组
0 0
Methods
方法 | 描述 |
---|---|
show | 展开显示 picker |
Events
事件 | 描述 | 参数 |
---|---|---|
confirm | 点击 confirm 按钮后触发 | [{ index: xxx, value: xxx }...] index: 当前选中的 item 在当列的 index value: 当前选中 item 的 value |
cancel | 点击 cancel 按钮后触发 |
Development
git clone git@github.com:Fyerl/vue-awesome-picker.gitcd vue-awesome-pickernpm installnpm run dev