基於vue的picker組件

概述

基於vue.js選擇器組件

github: https://github.com/xiecg/vue-...

DEMO

vue-picker

安裝

npm install vue-3d-picker --save

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

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:

參數	描述
v-model	默認值爲false，控制顯示和隱藏
:data-items	默認值爲[]，顯示的數組
@change	內容改變時執行的監聽函數

Picker Items Options:

參數	描述	類型	默認值
index	默認選中的索引值	Number	0
values	賦值的數組	Array	[]
width	顯示的寬度，單位是 %	String	'flex'
name	顯示數據的字段名，默認值是value .	String	'value'
maxScrollValue	最大的滾動值 .	Number	values.length

例子

npm install

npm run dev

注意

須要 postcss-salad 來支持picker組件的兼容性

原文：https://xiecg.github.io/2016/...