WheelPicker

仿 iOS UIPickerView 的滚动选择器

演示

DEMO

安装

$3

``sh
npm install wheel-picker --save
`

$3

`html


`

使用

`js
var frutis = ["草莓", "柠檬", "菠萝"];
var vegetables = [{
text: "番茄",
value: "tomato"
}, {
text: "蘑菇",
value: "mushroom"
}, {
text: "土豆",
value: "potato"
}];

var picker1 = new WheelPicker({
title: "最爱的水果",
data: [frutis],
onSelect: function(selected) {
alert("你选择的是：" + selected[0].text);
}
});

var picker2 = new WheelPicker({
title: "最爱的水果和蔬菜",
el: "#demo",
data: [frutis, vegetables],
value: ["柠檬", "potato"],
formatValue: function(value) {
return "你选择的分别是：" + value.join("、");
}
});
`

选项

| 参数 | 类型 | 默认值 | 描述 |
| ---------------- | -------- | ----------------------- | ---------------------------------------- |
| 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 | 点击取消时触发 |

方法

$3

返回值数组或指定列的值

$3

$3

设置各列的值或指定列的值

$3

返回选中的条目数组

$3

返回数据数组或指定列的数据

$3

$3

设置各列或指定列的数据和值

$3

显示组件

$3

隐藏组件

$3

启用组件

$3

禁用组件

$3

销毁组件

License

MIT