脚本宝典收集整理的这篇文章主要介绍了基于vue的picker组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

概述

基于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/...

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的基于vue的picker组件全部内容，希望文章能够帮你解决基于vue的picker组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。