vue-picker

a picker componemt for vue1.0

基于https://github.com/naihe138/vue-picker支持 vue 1.0 由于代码还维持在 1.x

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

demo

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

install

1.0 npm install vue1-picker --save

2.0 npm install vue-pickers --save

使用

<template>
  <div>
    <vue-pickers
      :show="show"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      @cancel="close"
      @confirm="confirmFn"></vue-pickers>
  </div>
</template>

<script>
import vuePickers from 'vue-pickers'
export default {
  components: {
    vuePickers
  },
  data() {
    return {
      show: false,
      columns: 1,
      defaultData: [
        {
          text: 1999,
          value: 1999
        }
      ],
      pickData: {
        // 第一列的数据结构
        data1: [
          {
            text: 1999,
            value: 1999
          },
          {
            text: 2001,
            value: 2001
          }
        ]
      }
    }
  },
  methods: {
    close() {
      this.show = false
    },
    confirmFn(val) {
      this.show = false
      this.defaultData = [val.select1]
    },
    toShow() {
      this.show = true
    }
  }
}
</script>

属性参数说明

| 参数 | 说明 | 是否必须 | 类型 | 默认值 | | ----------- | ------------------------------------------------------------ | -------- | ------------- | ------ | | show | 显示隐藏 picker | 是 | Boolean | false | | columns | 列数设置 | 是 | Number | 1 | | defaultData | 默认显示设置 | 否 | Array | [] | | link | 是否开启联动数据 | 否 | Boolean | false | | selectData | 数据设置，分别对应列（data1: [], data2: [], data3: [],） | 是 | Object | {} | | isRemember | 是否每次打开都是初始化的位置高度（设置这个默认值就没有用了） | 否 | Boolean | false |

事件说明

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