|
@@ -18,7 +18,19 @@ H5 + 各平台小程序(百度除外)
|
|
|
4、自定义选择器头部确定取消按钮颜色及插槽支持
|
|
|
5、选择器可视区自定义滚动个数
|
|
|
6、自定义数据字段,满足不同人的需求
|
|
|
-7、自定义选择器样式
|
|
|
+7、自定义选择器样式
|
|
|
+8、单选及非联动选择支持扁平化的简单数据,如下形式:
|
|
|
+
|
|
|
+```javascript
|
|
|
+// 单选列表
|
|
|
+list1: ['选项1', '选项2', '选项2'],
|
|
|
+// 非联动选择列表
|
|
|
+list2: [
|
|
|
+ ['选项1', '选项2', '选项3'],
|
|
|
+ ['选项11', '选项22', '选项33'],
|
|
|
+ ['选项111', '选项222', '选项333']
|
|
|
+]
|
|
|
+```
|
|
|
|
|
|
## 引入插件
|
|
|
|
|
@@ -58,6 +70,88 @@ npm install uni-lb-picker
|
|
|
import LbPicker from 'uni-lb-picker'
|
|
|
```
|
|
|
|
|
|
+## 选择器数据格式
|
|
|
+
|
|
|
+### 单选
|
|
|
+
|
|
|
+常规数据
|
|
|
+
|
|
|
+```javascript
|
|
|
+list: [
|
|
|
+ {
|
|
|
+ label: '选项1',
|
|
|
+ value: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '选项2',
|
|
|
+ value: '2'
|
|
|
+ }
|
|
|
+]
|
|
|
+```
|
|
|
+
|
|
|
+扁平化简单数据
|
|
|
+
|
|
|
+```javascript
|
|
|
+list: ['选项1', '选项2']
|
|
|
+```
|
|
|
+
|
|
|
+### 多级联动
|
|
|
+
|
|
|
+```javascript
|
|
|
+list: [
|
|
|
+ {
|
|
|
+ label: '选项1',
|
|
|
+ value: '1',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: '选项1-1',
|
|
|
+ value: '1-1',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: '选项1-1-1',
|
|
|
+ value: '1-1-1'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+```
|
|
|
+
|
|
|
+### 非联动选择
|
|
|
+
|
|
|
+常规数据
|
|
|
+
|
|
|
+```javascript
|
|
|
+list: [
|
|
|
+ [
|
|
|
+ { label: '选项1', value: '1' },
|
|
|
+ { label: '选项2', value: '2' },
|
|
|
+ { label: '选项3', value: '3' }
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { label: '选项11', value: '11' },
|
|
|
+ { label: '选项22', value: '22' },
|
|
|
+ { label: '选项33', value: '33' }
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { label: '选项111', value: '111' },
|
|
|
+ { label: '选项222', value: '222' },
|
|
|
+ { label: '选项333', value: '333' }
|
|
|
+ ]
|
|
|
+]
|
|
|
+```
|
|
|
+
|
|
|
+扁平化简单数据
|
|
|
+
|
|
|
+```javascript
|
|
|
+list: [
|
|
|
+ ['选项1', '选项2', '选项3'],
|
|
|
+ ['选项11', '选项22', '选项33'],
|
|
|
+ ['选项111', '选项222', '选项333']
|
|
|
+]
|
|
|
+```
|
|
|
+
|
|
|
## 调用显示选择器
|
|
|
|
|
|
通过`ref`形式手动调用`show`方法显示,隐藏同理调用`hide`
|
|
@@ -108,7 +202,7 @@ this.$refs.picker2.show() // picker2显示
|
|
|
为了满足不同人的需求,插件支持自定义数据字段名称, 插件默认的数据字段如下形式:
|
|
|
|
|
|
```javascript
|
|
|
-;[
|
|
|
+list: [
|
|
|
{
|
|
|
label: '选择1',
|
|
|
value: 1,
|
|
@@ -125,7 +219,7 @@ this.$refs.picker2.show() // picker2显示
|
|
|
如果你的数据字段和上面不一样,如下形式:
|
|
|
|
|
|
```javascript
|
|
|
-;[
|
|
|
+list: [
|
|
|
{
|
|
|
text: '选择1',
|
|
|
id: 1,
|
|
@@ -161,7 +255,7 @@ data () {
|
|
|
|
|
|
```html
|
|
|
<lb-picker>
|
|
|
- <view slot="cancle-text">我是自定义取消</view>
|
|
|
+ <view slot="cancel-text">我是自定义取消</view>
|
|
|
<view slot="confirm-text">我是自定义确定</view>
|
|
|
</lb-picker>
|
|
|
```
|
|
@@ -172,24 +266,30 @@ data () {
|
|
|
|
|
|
### Props
|
|
|
|
|
|
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
-| :---------------------- | :------------------------------------------------------ | :------------------ | :--------------------------------------------------------------- | :------------------------------------------------ |
|
|
|
-| value/v-model | 绑定值,联动选择为 Array 类型 | String/Number/Array | - | - |
|
|
|
-| mode | 选择器类型,支持单列,多列联动 | String | selector 单选/multiSelector 多级联动/unlinkedSelector 多级非联动 | selector |
|
|
|
-| list | 选择器数据 | Array | - | - |
|
|
|
-| level | 多列联动层级,仅 mode 为 multiSelector 有效 | Number | - | 2 |
|
|
|
-| props | 自定义数据字段 | Object | - | {label:'label',value:'value',children:'children'} |
|
|
|
-| cancle-text | 取消文字 | String | - | 取消 |
|
|
|
-| cancle-color | 取消文字颜色 | String | - | #999999 |
|
|
|
-| confirm-text | 确定文字 | String | - | 确定 |
|
|
|
-| confirm-color | 确定文字颜色 | String | - | #007aff |
|
|
|
-| column-num | 可视滚动区域内滚动个数,最好设置奇数值 | Number | - | 5 |
|
|
|
-| radius | 选择器顶部圆角,支持 rpx,如 radius="10rpx" | String | - | - |
|
|
|
-| ~~column-style~~ | 选择器默认样式(已弃用,见下方自定义样式说明) | Object | - | - |
|
|
|
-| ~~active-column-style~~ | 选择器选中样式(已弃用,见下方自定义样式说明) | Object | - | - |
|
|
|
-| loading | 选择器是否显示加载中,可使用 loading 插槽自定义加载效果 | Boolean | - | - |
|
|
|
-| mask-color | 遮罩层颜色 | String | - | rgba(0, 0, 0, 0.4) |
|
|
|
-| close-on-click-mask | 点击遮罩层是否关闭选择器 | Boolean | true/false | true |
|
|
|
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
+| :---------------------- | :------------------------------------------------------------------------------------------ | :------------------ | :--------------------------------------------------------------- | :------------------------------------------------ |
|
|
|
+| value/v-model | 绑定值,联动选择为 Array 类型 | String/Number/Array | - | - |
|
|
|
+| mode | 选择器类型,支持单列,多列联动 | String | selector 单选/multiSelector 多级联动/unlinkedSelector 多级非联动 | selector |
|
|
|
+| list | 选择器数据(v1.0.7 单选及非联动多选支持扁平数据:['选项 1', '选项 2']) | Array | - | - |
|
|
|
+| level | 多列联动层级,仅 mode 为 multiSelector 有效 | Number | - | 2 |
|
|
|
+| props | 自定义数据字段 | Object | - | {label:'label',value:'value',children:'children'} |
|
|
|
+| cancel-text | 取消文字 | String | - | 取消 |
|
|
|
+| cancel-color | 取消文字颜色 | String | - | #999 |
|
|
|
+| confirm-text | 确定文字 | String | - | 确定 |
|
|
|
+| confirm-color | 确定文字颜色 | String | - | #007aff |
|
|
|
+| empty-text | (v1.0.7 新增)选择器列表为空的时候显示的文字 | String | - | 暂无数据 |
|
|
|
+| empty-color | (v1.0.7 新增)暂无数据文字颜色 | String | - | #999 |
|
|
|
+| column-num | 可视滚动区域内滚动个数,最好设置奇数值 | Number | - | 5 |
|
|
|
+| radius | 选择器顶部圆角,支持 rpx,如 radius="10rpx" | String | - | - |
|
|
|
+| ~~column-style~~ | ~~选择器默认样式(已弃用,见下方自定义样式说明)~~ | Object | - | - |
|
|
|
+| ~~active-column-style~~ | ~~选择器选中样式(已弃用,见下方自定义样式说明)~~ | Object | - | - |
|
|
|
+| loading | 选择器是否显示加载中,可使用 loading 插槽自定义加载效果 | Boolean | - | - |
|
|
|
+| mask-color | 遮罩层颜色 | String | - | rgba(0, 0, 0, 0.4) |
|
|
|
+| close-on-click-mask | 点击遮罩层是否关闭选择器 | Boolean | true/false | true |
|
|
|
+| ~~change-on-init~~ | ~~(v1.0.7 已弃用)初始化时是否触发 change 事件~~ | Boolean | true/false | - |
|
|
|
+| dataset | (v1.0.7 新增)可以向组件中传递任意的自定义的数据,在`confirm`或`change`事件中可以取到 | Object | - | - |
|
|
|
+| show-header | (v1.0.8 新增)是否显示选择器头部 | Boolean | - | - true |
|
|
|
+| inline | (v1.0.8 新增)inline 模式,开启后默认显示选择器,无需点击弹出,可以配合`show-header`一起使用 | Boolean | - | - |
|
|
|
|
|
|
### 方法
|
|
|
|
|
@@ -200,26 +300,51 @@ data () {
|
|
|
|
|
|
### Events
|
|
|
|
|
|
-| 事件名称 | 说明 | 回调参数 |
|
|
|
-| :------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
-| show | 选择器打开时触发 | - |
|
|
|
-| hide | 选择器隐藏时触发 | - |
|
|
|
-| change | 选择器滚动时触发,此时不会改变绑定的值 | `{ index, item, value }` `index`触发滚动后新的索引,单选时是具体的索引值,多列联动选择时为数组。`item`触发滚动后新的的完整内容,包裹`label`、`value`等,单选时为对象,多列选择时为数组对象。`value`触发滚动后新的 value 值,单列选择时为具体值,多列联动选择时为数组 |
|
|
|
-| confirm | 点击选择器确定时触发,此时会改变绑定的值 | 同上`change`事件说明 |
|
|
|
-| cancle | 点击选择器取消时触发 | 同上`change`事件说明 |
|
|
|
+| 事件名称 | 说明 | 回调参数 |
|
|
|
+| :------- | :--------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
+| show | 选择器打开时触发 | - |
|
|
|
+| hide | 选择器隐藏时触发 | - |
|
|
|
+| change | 选择器滚动时触发,此时不会改变绑定的值 | `{ index, item, value, change }` `index`触发滚动后新的索引,单选时是具体的索引值,多列联动选择时为数组。`item`触发滚动后新的的完整内容,包括`label`、`value`等,单选时为对象,多列选择时为数组对象。`value`触发滚动后新的 value 值,单列选择时为具体值,多列联动选择时为数组。`change`触发事件的类型,详情参考下面的 change 事件备注 |
|
|
|
+| confirm | 点击选择器确定时触发,此时会改变绑定的值 | 同上`change`事件说明 |
|
|
|
+| cancel | 点击选择器取消时触发 | 同上`change`事件说明 |
|
|
|
+
|
|
|
+### `change` 事件备注
|
|
|
+
|
|
|
+如果绑定的值是空的,`change`触发后里面的内容都是列表的第一项。
|
|
|
+`change`事件会在以下情况触发:
|
|
|
+
|
|
|
+- 初始化
|
|
|
+- 绑定值 value 变化
|
|
|
+- 选择器 list 列表变化
|
|
|
+- 滚动选择器
|
|
|
+
|
|
|
+以上情况会在回调函数中都可以取到`change`变化的类型,对应上面的情况包括以下:
|
|
|
+
|
|
|
+- `init`
|
|
|
+- `value`
|
|
|
+- `list`
|
|
|
+- `scroll`
|
|
|
+
|
|
|
+根据这些类型大家可以在`change`的时候按需处理自己的业务逻辑,比如一种常见的情况,有默认值的时候需要显示默认值的文字,此时可以`change`事件中判断`change`的类型是否是`init`,如果是的话可以取事件回调中的`item`进行显示绑定值对应的文字信息。
|
|
|
+
|
|
|
+```javascript
|
|
|
+handleChange (e) {
|
|
|
+ if (e.change === 'init') {
|
|
|
+ console.log(e.item.label) // 单选 选项1
|
|
|
+ console.log(e.item.map(item => item.label).join('-')) // 多选 选项1-选项11
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
| 插槽名 | 说明 |
|
|
|
| :------------ | :------------------ |
|
|
|
-| cancle-text | 选择器取消文字插槽 |
|
|
|
+| cancel-text | 选择器取消文字插槽 |
|
|
|
| action-center | 选择器顶部中间插槽 |
|
|
|
| confirm-text | 选择器确定文字插槽 |
|
|
|
| loading | 选择器 loading 插槽 |
|
|
|
-
|
|
|
-## 其他
|
|
|
-
|
|
|
-其他功能参考示例 Demo 代码。
|
|
|
+| empty | 选择器 空数据 插槽 |
|
|
|
|
|
|
### 选择器自定义样式
|
|
|
|
|
@@ -264,3 +389,7 @@ handleConfirm (e) {
|
|
|
## Tips
|
|
|
|
|
|
微信小程序端,滚动时在 iOS 自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
|
|
|
+
|
|
|
+## 其他
|
|
|
+
|
|
|
+其他功能参考示例 Demo 代码。
|