A Vue Picker Component of The Mobile Terminal

A picker component for vue2.0

After walking around GitHub, I didn’t find the vue-picker component of the mobile terminal I wanted. So I started, took one out and felt the effect.

Install

npm install vue-pickers --save or yarn add vue-pickers

Use

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

<script>
  import VuePicker from 'vue-pickers'
  var tdata = []
  for (let i = 0; i < 20; i++) {
    tdata.push({
      label: 'The' + i + 'row',
      value: i
    })
  }
  export default {
    components: {
      VuePicker
    },
    data () {
      return {
        pickerVisible: false,
        pickData: [
          tdata
        ],
        result: ''
      }
    },
    methods: {
      show () {
        this.pickerVisible = true
      },
      cancel () {
        this.result = 'click cancel result: null'
      },
      confirm (res) {
        this.result = JSON.stringify(res)
      }
    }
  }
</script>

Attributes

Attribute	Description	require	Type	Default
visible	show/hide picker	yes	Boolean	false
data	pickerData，colums[data1, data2]	yes	Array	[]
layer	linkage column	no	Number	0
link	open linkage data	no	Boolean	false
defaultIndex	default index	no	Number/Array(for more colums)	无
cancelText	cancel text	no	String	‘取消’
confirmText	confirm text	no	String	‘确认’
title	picker title	no	String	‘’
showToolbar	show toolbar	no	Boolean	false
maskClick	click mask	no	Boolean	false

Events

Event Name	Description	require	Type	Default
change	select change	no	function(val)	-
cancel	cancel button click	no	function	-
confirm	confirm button click	no	function(val)	-

---

Download

#vue-picker #vue-js #vue-picker-component