admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-08 01:58:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ picker和selectPicker添加clearable属性

Browse Source
This commit is contained in:
QingHuan 2024-10-15 19:59:39 +08:00 committed by GitHub
parent a50c0be384
commit b0d60a0b75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 194 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
docs/component/picker.md
View File

@ -1,10 +1,9 @@
<frame/> <frame/>
# Picker 选择器 # Picker 选择器
Picker 组件为 popup 和 pickerView 的组合。 Picker 组件为 popup 和 pickerView 的组合。
## 基本用法 ## 基本用法
`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。 `columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
@ -24,11 +23,11 @@ function handleConfirm({ value }) {
当 `columns` 选项为对象时，其数据结构为： 当 `columns` 选项为对象时，其数据结构为：
| 参数 | 类型 | 说明 | 最低版本 | | 参数 | 类型 | 说明 | 最低版本 |
|-----|-----|------|---------| | -------- | ------------------------- | -------------------------------------------------------- | -------- |
| value | string / number / boolean | 选项值，如果 value 属性不存在，则使用 label 作为选项的值 | - | | value | string / number / boolean | 选项值，如果 value 属性不存在，则使用 label 作为选项的值 | - |
| label | string | 选项文本内容 | - | | label | string | 选项文本内容 | - |
| disabled | boolean | 选项是否禁用 | - | | disabled | boolean | 选项是否禁用 | - |
## 禁用 ## 禁用
@ -37,6 +36,7 @@ function handleConfirm({ value }) {
```html ```html
<wd-picker :columns="columns" label="禁用" v-model="value" disabled /> <wd-picker :columns="columns" label="禁用" v-model="value" disabled />
``` ```
```typescript ```typescript
const value = ref('选项3') const value = ref('选项3')
@ -52,6 +52,14 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
<wd-picker :columns="columns" label="只读" v-model="value" readonly /> <wd-picker :columns="columns" label="只读" v-model="value" readonly />
``` ```
## 清空按钮
设置 `clearable` 属性。
```html
<wd-picker :columns="columns" label="清空" v-model="value" clearable />
```
## 文案标题 ## 文案标题
设置 `title` 属性。 设置 `title` 属性。
@ -59,6 +67,7 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
```html ```html
<wd-picker label="标题" :columns="columns" title="文案标题"/> <wd-picker label="标题" :columns="columns" title="文案标题"/>
``` ```
## 加载中 ## 加载中
设置 `loading` 属性。 设置 `loading` 属性。
@ -74,6 +83,7 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
```html ```html
<wd-picker :columns="columns" label="多列" v-model="value" /> <wd-picker :columns="columns" label="多列" v-model="value" />
``` ```
```typescript ```typescript
const value = ref(['中南大学', '软件工程']) const value = ref(['中南大学', '软件工程'])
@ -230,76 +240,77 @@ function handleConfirm({ value }) {
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------| | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ | ------- | ---------------- |
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | | v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - | | columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
| loading | 加载中 | boolean | - | false | - | | loading | 加载中 | boolean | - | false | - |
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - | | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
| columns-height | picker内部滚筒高 | number | - | 231 | - | | columns-height | picker内部滚筒高 | number | - | 231 | - |
| value-key | 选项对象中，value对应的 key | string | - | value | - | | value-key | 选项对象中，value对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | | label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| title | 弹出层标题 | string | - | - | - | | title | 弹出层标题 | string | - | - | - |
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - | | cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - | | confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
| label | 选择器左侧文案 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | fasle | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - | | column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
| size | 设置选择器大小 | string | large | - | - | | size | 设置选择器大小 | string | large | - | - |
| label-width | 设置左侧标题宽度 | string | - | 33% | - | | label-width | 设置左侧标题宽度 | string | - | 33% | - |
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - | | error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
| required | 表单属性，必填 | boolean | - | false | - | | required | 表单属性，必填 | boolean | - | false | - |
| align-right | 选择器的值靠右展示 | boolean | - | false | - | | align-right | 选择器的值靠右展示 | boolean | - | false | - |
| use-label-slot | label 使用插槽 | boolean | - | false | - | | use-label-slot | label 使用插槽 | boolean | - | false | - |
| use-default-slot | 使用默认插槽 | boolean | - | false | - | | use-default-slot | 使用默认插槽 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - | | before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - | | z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - | | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
| ellipsis | 是否超出隐藏 | boolean | - | false | - | | ellipsis | 是否超出隐藏 | boolean | - | false | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - | | prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - | | rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 | | immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构 ### FormItemRule 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
| --- | --- | --- | | --------- | ------------------------------------------------------- | ------------------------------------- |
| required | 是否为必选字段 | `boolean` | | required | 是否为必选字段 | `boolean` |
| message | 错误提示文案 | `string` | | message | 错误提示文案 | `string` |
| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` | | validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` | | pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
## Events ## Events
| 事件名称 | 说明 | 参数 | 最低版本 | | 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------| | -------- | ---------------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
| confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - | | confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
| cancel | 点击左侧按钮触发 | - | - | | cancel | 点击左侧按钮触发 | - | - |
| open | 打开选择器弹出层时触发 | - | - | | open | 打开选择器弹出层时触发 | - | - |
## Methods ## Methods
| 方法名称 | 说明 | 参数 | 最低版本 | | 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------| | -------- | -------------- | ---- | -------- |
| open | 打开picker弹框 | - | - | | open | 打开picker弹框 | - | - |
| close | 关闭picker弹框 | - | - | | close | 关闭picker弹框 | - | - |
## Slot ## Slot
| name | 说明 | 最低版本 | | name | 说明 | 最低版本 |
|------|-----|---------| | ------- | ------------ | -------- |
| default | 使用默认插槽 | - | | default | 使用默认插槽 | - |
| label | 左侧标题插槽 | - | | label | 左侧标题插槽 | - |
## 外部样式类 ## 外部样式类
| 类名 | 说明 | 最低版本 | | 类名 | 说明 | 最低版本 |
|-----|------|--------| | ------------------ | ------------------------- | -------- |
| custom-class | 根节点样式 | - | | custom-class | 根节点样式 | - |
| custom-view-class | pickerView 外部自定义样式 | - | | custom-view-class | pickerView 外部自定义样式 | - |
| custom-label-class | label 外部自定义样式 | - | | custom-label-class | label 外部自定义样式 | - |
| custom-value-class | value 外部自定义样式 | - | | custom-value-class | value 外部自定义样式 | - |

89
docs/component/select-picker.md
View File

@ -80,6 +80,14 @@ const value = ref<string[]>(['101'])
<wd-select-picker label="只读" v-model="value" :columns="columns" readonly></wd-select-picker> <wd-select-picker label="只读" v-model="value" :columns="columns" readonly></wd-select-picker>
``` ```
## 清空
设置 `clearable` 属性
```html
<wd-select-picker label="清空" v-model="value" :columns="columns" clearable></wd-select-picker>
```
## 禁用选项 ## 禁用选项
`columns` 每个选项支持 `disabled` 属性。 `columns` 每个选项支持 `disabled` 属性。
@ -314,44 +322,45 @@ function handleConfirm({ value, selectedItems }) {
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | -------- | | ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | ---------------- |
| v-model | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string | array / number / boolean / string | - | - | - | | v-model | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string | array / number / boolean / string | - | - | - |
| columns | 选择器数据，一维数组 | array | - | - | - | | columns | 选择器数据，一维数组 | array | - | - | - |
| type | 单复选选择器类型 | string | checkbox / radio | checkbox | - | | type | 单复选选择器类型 | string | checkbox / radio | checkbox | - |
| value-key | 选项对象中，value 对应的 key | string | - | value | - | | value-key | 选项对象中，value 对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | | label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| title | 弹出层标题 | string | - | - | - | | title | 弹出层标题 | string | - | - | - |
| label | 选择器左侧文案 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | fasle | - |
| loading | 加载中 | boolean | - | false | - | | loading | 加载中 | boolean | - | false | - |
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - | | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| confirm-button-text | 确认按钮文案 | string | - | 确认 | - | | confirm-button-text | 确认按钮文案 | string | - | 确认 | - |
| size | 设置选择器大小 | string | large | - | - | | size | 设置选择器大小 | string | large | - | - |
| label-width | 设置左侧标题宽度 | string | - | 33% | - | | label-width | 设置左侧标题宽度 | string | - | 33% | - |
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - | | error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
| required | 必填样式 | boolean | - | false | - | | required | 必填样式 | boolean | - | false | - |
| align-right | 选择器的值靠右展示 | boolean | - | false | - | | align-right | 选择器的值靠右展示 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - | | before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - |
| select-size | 设置 picker 内部的选项组尺寸大小 （单/复选框） | string | large | - | - | | select-size | 设置 picker 内部的选项组尺寸大小 （单/复选框） | string | large | - | - |
| min | 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - | | min | 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - |
| max | 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - | | max | 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - |
| checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - | | checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - | | use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - | | use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - | | z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - | | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
| filterable | 可搜索（目前只支持本地搜索） | boolean | - | false | - | | filterable | 可搜索（目前只支持本地搜索） | boolean | - | false | - |
| filter-placeholder | 搜索框占位符 | string | - | 搜索 | - | | filter-placeholder | 搜索框占位符 | string | - | 搜索 | - |
| ellipsis | 是否超出隐藏 | boolean | - | false | - | | ellipsis | 是否超出隐藏 | boolean | - | false | - |
| scroll-into-view | 重新打开是否滚动到选中项 | boolean | - | true | 0.1.34 | | scroll-into-view | 重新打开是否滚动到选中项 | boolean | - | true | 0.1.34 |
| show-confirm | 是否显示确认按钮（仅`radio`类型生效） | boolean | | true | 1.2.8 | | show-confirm | 是否显示确认按钮（仅`radio`类型生效） | boolean | | true | 1.2.8 |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - | | prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - | | rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构 ### FormItemRule 数据结构
@ -377,8 +386,8 @@ function handleConfirm({ value, selectedItems }) {
| confirm | 点击确认时触发 | event.detail = { value, selectedItems }, checkbox 类型时 value 和 selectedItems 为数组，radio 类型为非数组 | - | | confirm | 点击确认时触发 | event.detail = { value, selectedItems }, checkbox 类型时 value 和 selectedItems 为数组，radio 类型为非数组 | - |
| change | picker 内选项更改时触发 | `{ value }`, checkbox 类型时 value 为数组，radio 类型为非数组 | - | | change | picker 内选项更改时触发 | `{ value }`, checkbox 类型时 value 为数组，radio 类型为非数组 | - |
| cancel | 点击关闭按钮或者蒙层时触发 | - | - | | cancel | 点击关闭按钮或者蒙层时触发 | - | - |
| close | 弹窗关闭时触发 | - | 1.2.29 | | close | 弹窗关闭时触发 | - | 1.2.29 |
| open | 弹窗打开时触发 | - | 1.2.29 | | open | 弹窗打开时触发 | - | 1.2.29 |
## Methods ## Methods

2
src/pages/picker/Index.vue
View File

@ -14,6 +14,7 @@
<wd-picker label="before-confirm" :columns="columns0" v-model="value7" :before-confirm="beforeConfirm" /> <wd-picker label="before-confirm" :columns="columns0" v-model="value7" :before-confirm="beforeConfirm" />
<wd-picker label="错误" v-model="value10" error :columns="columns0" /> <wd-picker label="错误" v-model="value10" error :columns="columns0" />
<wd-picker label="必填" v-model="value11" :columns="columns0" required /> <wd-picker label="必填" v-model="value11" :columns="columns0" required />
<wd-picker label="可清空" :clearable="true" v-model="value15" :columns="columns5" :column-change="onChangeDistrict" />
</wd-cell-group> </wd-cell-group>
</demo-block> </demo-block>
<demo-block title="label 不传" transparent> <demo-block title="label 不传" transparent>
@ -105,6 +106,7 @@ const columns4 = ref([
]) ])
const value5 = ref(['110000', '110100', '110102']) const value5 = ref(['110000', '110100', '110102'])
const value15 = ref(['110000', '110100', '110102'])
const columns5 = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]]) const columns5 = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
const value6 = ref(['中南大学', '软件工程']) const value6 = ref(['中南大学', '软件工程'])

12
src/pages/selectPicker/Index.vue
View File

@ -14,10 +14,19 @@
<wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" /> <wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" />
<wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" /> <wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" />
<wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" /> <wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" />
<wd-select-picker label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" /> <wd-select-picker clearable label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" />
<wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" /> <wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" />
<wd-select-picker label="单选可搜索" filterable v-model="value18" type="radio" :columns="columns1" @confirm="handleConfirm13" /> <wd-select-picker label="单选可搜索" filterable v-model="value18" type="radio" :columns="columns1" @confirm="handleConfirm13" />
<wd-select-picker label="自动完成" type="radio" :show-confirm="false" v-model="value19" :columns="columns1" @confirm="handleConfirm2" /> <wd-select-picker label="自动完成" type="radio" :show-confirm="false" v-model="value19" :columns="columns1" @confirm="handleConfirm2" />
<wd-select-picker
label="可清空"
clearable
type="radio"
:show-confirm="false"
v-model="value20"
:columns="columns1"
@confirm="handleConfirm2"
/>
</wd-cell-group> </wd-cell-group>
</view> </view>
<demo-block title="label不传" transparent> <demo-block title="label不传" transparent>
@ -128,6 +137,7 @@ const value16 = ref<string[]>(['103'])
const value17 = ref<string[]>(['102']) const value17 = ref<string[]>(['102'])
const value18 = ref<string>('102') const value18 = ref<string>('102')
const value19 = ref<string>('101') const value19 = ref<string>('101')
const value20 = ref<string>('101')
const customShow = ref<string>('奢侈品') const customShow = ref<string>('奢侈品')

11
src/uni_modules/wot-design-uni/components/wd-picker/index.scss
View File

@ -25,7 +25,8 @@
color: $-dark-color-gray; color: $-dark-color-gray;
} }
:deep(.wd-picker__arrow){ :deep(.wd-picker__arrow),
:deep(.wd-picker__clear) {
color: $-dark-color; color: $-dark-color;
} }
@ -78,13 +79,15 @@
.wd-picker__cell { .wd-picker__cell {
font-size: $-cell-title-fs-large; font-size: $-cell-title-fs-large;
} }
:deep(.wd-picker__arrow) { :deep(.wd-picker__arrow),
:deep(.wd-picker__clear) {
font-size: $-cell-icon-size-large; font-size: $-cell-icon-size-large;
} }
} }
@include when(error) { @include when(error) {
.wd-picker__value, .wd-picker__value,
:deep(.wd-picker__arrow) { :deep(.wd-picker__arrow),
:deep(.wd-picker__clear) {
color: $-input-error-color; color: $-input-error-color;
} }
} }
@ -170,7 +173,7 @@
color: $-input-placeholder-color; color: $-input-placeholder-color;
} }
@include edeep(arrow) { @include edeep(arrow,clear) {
display: block; display: block;
font-size: $-cell-icon-size; font-size: $-cell-icon-size;
color: $-cell-arrow-color; color: $-cell-arrow-color;

6
src/uni_modules/wot-design-uni/components/wd-picker/types.ts
View File

@ -147,7 +147,11 @@ export const pickerProps = {
/** /**
* 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/ */
immediateChange: makeBooleanProp(false) immediateChange: makeBooleanProp(false),
/**
* 显示清空按钮
*/
clearable: makeBooleanProp(false)
} }
export type PickerProps = ExtractPropTypes<typeof pickerProps> export type PickerProps = ExtractPropTypes<typeof pickerProps>

18
src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
View File

@ -21,7 +21,8 @@
<view :class="`wd-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-picker__placeholder'}`"> <view :class="`wd-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-picker__placeholder'}`">
{{ showValue ? showValue : placeholder || translate('placeholder') }} {{ showValue ? showValue : placeholder || translate('placeholder') }}
</view> </view>
<wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" /> <wd-icon v-if="showArrow" custom-class="wd-picker__arrow" name="arrow-right" />
<wd-icon v-else-if="showClear" custom-class="wd-picker__clear" name="error-fill" @click.stop="handleClear" />
</view> </view>
<view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view> <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
</view> </view>
@ -384,6 +385,21 @@ function setLoading(loading: boolean) {
innerLoading.value = loading innerLoading.value = loading
} }
// 是否展示清除按钮
const showClear = computed(() => {
return props.clearable && !props.disabled && !props.readonly && showValue.value.length
})
function handleClear() {
const clearValue = isArray(pickerValue.value) ? [] : ''
emit('update:modelValue', clearValue)
}
// 是否展示箭头
const showArrow = computed(() => {
return !props.disabled && !props.readonly && !showClear.value
})
defineExpose<PickerExpose>({ defineExpose<PickerExpose>({
close, close,
open, open,

11
src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss
View File

@ -30,7 +30,8 @@
} }
:deep(.wd-select-picker__arrow), :deep(.wd-select-picker__arrow),
:deep(.wd-select-picker__close) { :deep(.wd-select-picker__close),
:deep(.wd-select-picker__clear) {
color: $-dark-color; color: $-dark-color;
} }
@ -71,14 +72,16 @@
.wd-select-picker__value { .wd-select-picker__value {
color: $-input-error-color; color: $-input-error-color;
} }
:deep(.wd-select-picker__arrow) { :deep(.wd-select-picker__arrow),
:deep(.wd-select-picker__clear) {
color: $-input-error-color; color: $-input-error-color;
} }
} }
@include when(large) { @include when(large) {
font-size: $-cell-title-fs-large; font-size: $-cell-title-fs-large;
:deep(.wd-select-picker__arrow ){ :deep(.wd-select-picker__arrow),
:deep(.wd-select-picker__clear) {
font-size: $-cell-icon-size-large; font-size: $-cell-icon-size-large;
} }
} }
@ -129,7 +132,7 @@
@include e(body) { @include e(body) {
flex: 1; flex: 1;
} }
@include edeep(arrow) { @include edeep(arrow, clear) {
display: block; display: block;
font-size: $-cell-icon-size; font-size: $-cell-icon-size;
color: $-cell-arrow-color; color: $-cell-arrow-color;

6
src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts
View File

@ -83,7 +83,11 @@ export const selectPickerProps = {
/** 自定义值样式类 */ /** 自定义值样式类 */
customValueClass: makeStringProp(''), customValueClass: makeStringProp(''),
/** 是否显示确认按钮（radio类型生效），默认值为：true */ /** 是否显示确认按钮（radio类型生效），默认值为：true */
showConfirm: makeBooleanProp(true) showConfirm: makeBooleanProp(true),
/**
* 显示清空按钮
*/
clearable: makeBooleanProp(false)
} }
export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps> export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>

17
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
View File

@ -25,7 +25,8 @@
> >
{{ showValue || placeholder || translate('placeholder') }} {{ showValue || placeholder || translate('placeholder') }}
</view> </view>
<wd-icon v-if="!disabled && !readonly" custom-class="wd-select-picker__arrow" name="arrow-right" /> <wd-icon v-if="showArrow" custom-class="wd-select-picker__arrow" name="arrow-right" />
<wd-icon v-else-if="showClear" custom-class="wd-select-picker__clear" name="error-fill" @click.stop="handleClear" />
</view> </view>
<view v-if="errorMessage" class="wd-select-picker__error-message">{{ errorMessage }}</view> <view v-if="errorMessage" class="wd-select-picker__error-message">{{ errorMessage }}</view>
@ -430,6 +431,20 @@ const showConfirm = computed(() => {
return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox' return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
}) })
// 是否展示清除按钮
const showClear = computed(() => {
return props.clearable && !props.disabled && !props.readonly && showValue.value.length
})
function handleClear() {
emit('update:modelValue', props.type === 'checkbox' ? [] : '')
}
// 是否展示箭头
const showArrow = computed(() => {
return !props.disabled && !props.readonly && !showClear.value
})
defineExpose<SelectPickerExpose>({ defineExpose<SelectPickerExpose>({
close, close,
open open