基于vue的picker组件

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

weixin_34205826

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

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

介绍了一个基于Vue.js的3D选择器组件，包括安装步骤、基本使用方法及参数配置。该组件可通过npm安装，并集成到Vue项目中，支持自定义内容和监听事件。

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

概述

基于vue.js选择器组件

github: https://github.com/xiecg/vue-...

DEMO

vue-picker

安装

npm install vue-3d-picker --save

import picker from 'vue-3d-picker';

Vue.component(picker.name, picker);

基础用法

<picker v-model="visible" :data-items="items" @change="onValuesChange">
    <div class="top-content" slot="top-content">Top of the content.</div>
    <div class="bottom-content" slot="bottom-content">Bottom of the content.</div>
</picker>

export default {
  methods: {
    onValuesChange(result1, result2, ...) {
      console.log(result1, result2);
    }
  },

  data() {
    return {
      visible: true,
      items: [
        {
          values: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007'],
        }, {
          values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        }
      ]
    }
  }
}

选项

Picker Options:

参数	描述
v-model	默认值为false，控制显示和隐藏
:data-items	默认值为[]，显示的数组
@change	内容改变时执行的监听函数

Picker Items Options:

参数	描述	类型	默认值
index	默认选中的索引值	Number	0
values	赋值的数组	Array	[]
width	显示的宽度，单位是 %	String	'flex'
name	显示数据的字段名，默认值是value .	String	'value'
maxScrollValue	最大的滚动值 .	Number	values.length

例子


npm install

npm run dev

注意

需要 postcss-salad 来支持picker组件的兼容性

原文：https://xiecg.github.io/2016/...