中文 | English

vue-picker的组件，囊括了（普通选择、联动选择、中国地址选择）等等常见的picker，兼容PC、移动端，通过简单配置就可以出现一个强大的picker，感受下效果图。

Demo(快点去复制代码体验一波吧)

https://naihe138.github.io/vue-picker/index.html

Install

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

使用

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

<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: '第' + i + '行',
      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>

属性参数说明

参数 | 说明 | 是否必须 | 类型 |默认值 ---- | --- | --- | --- | --- visible | 显示/隐藏picker | 是 | Boolean | false data | pickerData，多列[data1, data2] | 是 | Array | [] layer | 联动显示列数 | 否 | Number | 0 defaultIndex | 默认显示的index | 否 | Number/Array(多列用数组) | 无 cancelText | 取消按钮文字 | 否 | String | '取消' confirmText | 去确认按钮文字 | 否 | String | '确认' title | picker标题 | 否 | String | '' showToolbar | 显示头部 | 否 | Boolean | false maskClick | 遮罩层是否可以点击关闭 | 否 | Boolean | false itemHeight | 每一行的高度 | 否 | Number, String | '44px' rowNumber | 显示多少行(建议单数) | 否 | Number | 5 appendToBody | 是否插入到body中 | 否 | Boolean | false

事件说明

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