一个很好用的 vue-picker组件

vue-picker

vue-picker的组件,包括了(普通选择联动选择中国地址选择...)简单配置就可以出现一个强大的picker,感受下效果图。

vue-picker

demo

demo 地址:https://naihe138.github.io/vu...

install

npm install vue-pickers --save

使用
普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用

<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
itemHeight 每一行的高度 Number, String '44px'
rowNumber 显示多少行(建议单数) Number 5

事件说明

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

推荐阅读
naice
用户专栏

共享

41 人关注
23 篇文章
专栏主页