一个很好用的 vue-picker组件

最新推荐文章于 2025-06-11 14:54:57 发布

转载最新推荐文章于 2025-06-11 14:54:57 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010907490

文章标签：

#javascript #ViewUI

本文介绍了一款适用于Vue 2.0的移动端日期选择器组件Vue-Picker的开发过程及使用方法，包括安装步骤、参数配置及事件处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-picker

a picker componemt for vue2.0

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

demo

demo 地址：http://gitblog.naice.me/vue-p...

install

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<object>	[]
link	是否开启联动数据	否	Boolean	false
selectData	数据设置，分别对应列（data1: [], data2: [], data3: [],）	是	Object	{}

事件说明

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