一個很好用的 vue-picker組件

vue-picker

A picker componemt for vue2.0

---

走了一圈 github 都沒有找到本身想要的移動端的 vue-picker的組件，因而本身就下手，擼了一個出來，感覺下效果圖。

demo

demo 地址：http://gitblog.naice.me/vue-p...

install

npm install vue-pickers --save

使用

<template>
  <div>
    <VuePicker :data="pickData"
      @cancel="cancel"
      @confirm="confirm"
      :showToolbar="true"
      :maskClick="true"
      :visible.sync="pickerVisible"
    />
  </div>
</template>

<script>
  import vuePickers from 'vue-pickers'
  export default {
    components: { vuePickers },
    data () {
      let tdata = []
      for (let i = 0; i < 20; i++) {
        tdata.push({
          label: `第${i}行`,
          value: i
        })
      }
      return {
        pickerVisible: false,
        pickData: [ tdata ],
        result: ''
      }
    },
    methods: {
      cancel () {
        console.log('cancel')
        this.result = 'click cancel result: null'
      },
      confirm (res) {
        this.result = JSON.stringify(res)
        console.log(res)
      }
    },
  }
</script>

屬性參數說明

參數	說明	是否必須	類型	默認值
visible	顯示/隱藏picker	是	Boolean	false
data	pickerData，多列[data1, data2]	是	Array	[]
layer	聯動顯示列數	否	Number	0
link	是否開啓聯動數據	否	Boolean	false
defaultIndex	默認顯示的index	否	Number/[](多列用數組)	無
cancelText	取消按鈕文字	否	String	'取消'
confirmText	去確認按鈕文字	否	String	'確認'
title	picker標題	否	String	''
showToolbar	顯示頭部	否	Boolean	false
maskClick	遮罩層是否能夠點擊關閉	否	Boolean	false

事件說明

參數	說明	是否必須	類型	默認值
change	數據變化事件	否	function(val)	無
cancel	取消選擇	否	function	無
confirm	確認選擇	否	function(val)	無