基于vue的picker组件

2024年5月7日 166次阅读 来源: xiecg

概述

基于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默许选中的索引值Number0
values赋值的数组Array[]
width显现的宽度，单元是 %String‘flex’
name显现数据的字段名，默许值是value .String‘value’
maxScrollValue最大的转动值 .Numbervalues.length

例子


npm install

npm run dev

注重

须要 postcss-salad 来支撑picker组件的兼容性

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

    原文作者：xiecg
    原文地址: https://segmentfault.com/a/1190000007253581
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞