The picker component based on vue.js
npm install vue-3d-picker --saveimport picker from 'vue-3d-picker';Register component:
Vue.component(picker.name, picker);<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'],
}
]
}
}
}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 |
npm install
npm run dev
Need postcss-salad support