Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vuejs-picker

djzyFE8MIT1.1.7

A Vue.js Picker Component

vue, awesome, picker, cascade, components, better-scroll

readme

vuejs-picker

基于 Vue.js & Better-Scroll 的移动端 picker 组件

Features

  • 支持单列、多列和联级数据
  • 内置时间、日期数据
  • 滚轮 3D 效果
  • 颜色可配置

Demo

PS:Demo 已启用 Service Worker

Installation

npm install vuejs-picker --save

Usage

/* main.js */
import AwesomePicker from 'vuejs-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 git@github.com:Fyerl/vue-awesome-picker.git
cd vue-awesome-picker
npm install
npm run dev

Contact

changelog

[1.1.1] - 2018-12-25

Changed

  • 修改npm名.
  • 修改npm包版本.

[1.1.0] - 2018-12-10

Changed

  • 闰年二月天数 bugfix.