WheelPicker
仿 iOS UIPickerView 的滚动选择器
演示
安装
NPM
npm install wheel-picker --save
CDN
使用
var frutis = "草莓" "柠檬" "菠萝";var vegetables = text: "番茄" value: "tomato" text: "蘑菇" value: "mushroom" text: "土豆" value: "potato"; var picker1 = title: "最爱的水果" data: frutis { ; }; var picker2 = title: "最爱的水果和蔬菜" el: "#demo" data: frutis vegetables value: "柠檬" "potato" { return "你选择的分别是:" + value; };
选项
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
title | string | null | 标题 |
el | element | null | 选择器对应的 input 元素 |
hiddenInput | boolean | false | 将 el.type 设置为 hidden 并用于保存 value 值;再 clone 一个 el 元素用于显示 text 值 |
hideOnBackdrop | boolean | false | 点击遮罩层关闭组件(相当于点击取消按钮) |
data | array | [] | 每列的数据组成的数组 |
value | array | [] | 每列的默认值组成的数组 |
rows | number | 5 | 可见的行数(奇数) |
rowHeight | number | 34 | 行高 |
formatValue | function | val => val.split(" ") |
从 el 元素获取默认值 |
parseValue | function | val => val.join(" ") |
保存时填充到 el 或 cloneNode 的值 |
parseHiddenValue | function | val => val.join(" ") |
保存时填充到 el 的值(如果 hiddenInput 为 true) |
onRender | function | null | 生成组件 DOM 时触发,参数为组件元素 |
onShow | function | null | 显示组件时触发 |
onChange | function | null | 滚动导致值变化时触发,参数为发生变化的列的索引值和选中项 |
onSelect | function | null | 点击确定时触发,参数为条目数组 |
onCancel | function | null | 点击取消时触发 |
方法
picker.getValue([index:number])
返回值数组或指定列的值
picker.setValue(value:array)
picker.setValue(value:string, index:number)
设置各列的值或指定列的值
picker.getSelectedItems()
返回选中的条目数组
picker.getData([index:nubmer])
返回数据数组或指定列的数据
picker.setData(data:array [, value:array])
picker.setData(data:array, index:number [, value:string])
设置各列或指定列的数据和值
picker.show()
显示组件
picker.hide()
隐藏组件
picker.enable()
启用组件
picker.disable()
禁用组件
picker.destory()
销毁组件