vue-awesome-picker's Introduction

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 */
import AwesomePicker from 'vue-awesome-picker';
Vue.use(AwesomePicker);

/* 详细使用方法参照源码 App.vue */
<awesome-picker
  ref="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: {
  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 dev

vue-awesome-picker's Issues

wheel.getSelectedIndex() 为NaN

我把数据改成对象的形式，当我从单列切换到双列的时候，获取wheel.getSelectedIndex() 为NaN,返回的数据为空。但是第一次就是双列的时候就没有问题，大佬，这要怎么解决呢？

1.默认值，第一次的时候不能对应选中（跟问题三为同一原因）
2.级联数据滚动时，284行会报错children不存在，第273行 while (data) 可以改成 while (data&data。length>0)解决；
3.滚动数据不及时更新index，导致获取值失败问题。比如：选河北唐山路南区，index为[2,1,1],再滚动到北京[0,0,0]时，index为[0，1，1],当第一列改变后第2列跟第三列数据变了，index未更新，然后新的地区，又没有对应index，就报错无法进行下去了；比如北京的市index没有1，只有0值，就会报错；

acado-studio / vue-awesome-picker Goto Github PK