Overview

The picker component based on vue.js

DEMO

vue-picker

Install

npm install vue-3d-picker --save

import picker from 'vue-3d-picker';

Register component:

Vue.component(picker.name, picker);

Base Usage

<picker v-model="visible" :data-items="items" @change="onValuesChange">
	<div class="top-content" slot="top-content">Top of the content.</div>
	<div class="bottom-content" slot="bottom-content">Bottom of the content.</div>
</picker>

export default {
  methods: {
    onValuesChange(result1, result2, ... ) {
      console.log(result1, result2)
    }
  },
  data() {
    return {
      visible: true,
      items: [
        {
          values: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007'],
        }, {
          values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        }
      ]
    }
  }
}

Options

Picker Options:

| Option | Description | | ----- | ----- | | v-model | Boolean(default: false) Picker show and hide. | | :data-items | Array(default: []) The configuration on the items. | | @change | Function() Listening when data changes. |

Picker Items Options:

| Option | Description | Type | Default | | ----- | ----- | ----- | ----- | | index | item default index position. | Number | 0 | | values | values of this item. | Array | [] | | width | The width of the item. The unit is %.| String | 'flex' | | name | If values is an object. set the displayed key.| String | 'value' | | maxScrollValue | The maximum value for scrolling.| Number | values.length |

example

npm install

npm run dev

prompt

Need postcss-salad support

中文

Picker