1.0.0 • Published 7 years ago

vue-picker-all v1.0.0

Weekly downloads
2
License
ISC
Repository
github
Last release
7 years ago

vue-picker

A picker componemt for vue2.0


走了一圈 github 都没有找到自己想要的移动端的 vue-picker的组件,于是自己就下手,撸了一个出来,感受下效果图。 vue-pick.gif

demo

demo 地址:http://gitblog.naice.me/vue-picker/example/index.html#/

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显示/隐藏pickerBooleanfalse
datapickerData,多列data1, data2Array[]
layer联动显示列数Number0
link是否开启联动数据Booleanfalse
defaultIndex默认显示的indexNumber/
cancelText取消按钮文字String'取消'
confirmText去确认按钮文字String'确认'
titlepicker标题String''
showToolbar显示头部Booleanfalse
maskClick遮罩层是否可以点击关闭Booleanfalse

事件说明

参数说明是否必须类型默认值
change数据变化事件function(val)
cancel取消选择function
confirm确认选择function(val)