Nationwide Polamorous Matrimony

    vue-awesome-picker

    1.1.0 • Public • Published

    vue-awesome-picker NPM Version NPM Downloads

    基于 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.$ref.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

    Install

    npm i vue-awesome-picker

    DownloadsWeekly Downloads

    43

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    717 kB

    Total Files

    20

    Last publish

    Collaborators

    • fyerl