2019-08-28
弃坑一年多，但仍有不少同学在使用，还是决定把坑填了，填坑中
----分割线----
⚠️ DEPRECATED 本组件停止维护
⚠️ Vue 组件库请移步 Vant
⚠️ 小程序组件库请移步 Vant Weapp
⚠️ 有赞前端大量坑位，内推私信
vue-awesome-picker
基于 Vue.js & Better-Scroll 的移动端 picker 组件
Features
- 支持单列、多列和联级数据
- 内置时间、日期数据
- 滚轮 3D 效果
- 颜色可配置
Demo
PS：Demo 已启用 Service Worker 试试离线访问吧
点击查看 >>
Installation
npm install vue-awesome-picker --saveUsage
/* main.js */
import AwesomePicker from 'vue-awesome-picker';
Vue.use(AwesomePicker);/* 详细使用方法参照源码 App.vue */
methods: {
show() {
this.$refs.picker.show();
}
}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 [email protected]:Fyerl/vue-awesome-picker.git
cd vue-awesome-picker
npm install
npm run devkeywords for seo: js picker, 前端 picker, datepicker, timepicker, vue, picker, vue picker, vue awesome picker, service worker, pwa, vue pwa, npm, vue npm