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