mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ picker和selectPicker添加clearable属性
This commit is contained in:
QingHuan
GitHub
parent
a50c0be384
commit
b0d60a0b75
@ -1,10 +1,9 @@
|
||||
<frame/>
|
||||
|
||||
# Picker 选择器
|
||||
# Picker 选择器
|
||||
|
||||
Picker 组件为 popup 和 pickerView 的组合。
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
|
||||
@ -24,11 +23,11 @@ function handleConfirm({ value }) {
|
||||
|
||||
当 `columns` 选项为对象时，其数据结构为：
|
||||
|
||||
| 参数 | 类型 | 说明 | 最低版本 |
|
||||
|-----|-----|------|---------|
|
||||
| value | string / number / boolean | 选项值，如果 value 属性不存在，则使用 label 作为选项的值 | - |
|
||||
| label | string | 选项文本内容 | - |
|
||||
| disabled | boolean | 选项是否禁用 | - |
|
||||
| 参数 | 类型 | 说明 | 最低版本 |
|
||||
| -------- | ------------------------- | -------------------------------------------------------- | -------- |
|
||||
| value | string / number / boolean | 选项值，如果 value 属性不存在，则使用 label 作为选项的值 | - |
|
||||
| label | string | 选项文本内容 | - |
|
||||
| disabled | boolean | 选项是否禁用 | - |
|
||||
|
||||
## 禁用
|
||||
|
||||
@ -37,6 +36,7 @@ function handleConfirm({ value }) {
|
||||
```html
|
||||
<wd-picker :columns="columns" label="禁用" v-model="value" disabled />
|
||||
```
|
||||
|
||||
```typescript
|
||||
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 />
|
||||
```
|
||||
|
||||
## 清空按钮
|
||||
|
||||
设置 `clearable` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker :columns="columns" label="清空" v-model="value" clearable />
|
||||
```
|
||||
|
||||
## 文案标题
|
||||
|
||||
设置 `title` 属性。
|
||||
@ -59,6 +67,7 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
|
||||
```html
|
||||
<wd-picker label="标题" :columns="columns" title="文案标题"/>
|
||||
```
|
||||
|
||||
## 加载中
|
||||
|
||||
设置 `loading` 属性。
|
||||
@ -74,6 +83,7 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
|
||||
```html
|
||||
<wd-picker :columns="columns" label="多列" v-model="value" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
const value = ref(['中南大学', '软件工程'])
|
||||
|
||||
@ -230,76 +240,77 @@ function handleConfirm({ value }) {
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
|
||||
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
|
||||
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
||||
| value-key | 选项对象中，value对应的 key | string | - | value | - |
|
||||
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
|
||||
| title | 弹出层标题 | string | - | - | - |
|
||||
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
|
||||
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
|
||||
| label | 选择器左侧文案 | string | - | - | - |
|
||||
| placeholder | 选择器占位符 | string | - | 请选择 | - |
|
||||
| disabled | 禁用 | boolean | - | fasle | - |
|
||||
| readonly | 只读 | boolean | - | false | - |
|
||||
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
|
||||
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
|
||||
| size | 设置选择器大小 | string | large | - | - |
|
||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||
| required | 表单属性，必填 | boolean | - | false | - |
|
||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||
| use-label-slot | label 使用插槽 | boolean | - | false | - |
|
||||
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
|
||||
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
|
||||
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
|
||||
| z-index | 弹窗层级 | number | - | 15 | - |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
|
||||
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
||||
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
|
||||
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
||||
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ | ------- | ---------------- |
|
||||
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
|
||||
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
|
||||
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
||||
| value-key | 选项对象中，value对应的 key | string | - | value | - |
|
||||
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
|
||||
| title | 弹出层标题 | string | - | - | - |
|
||||
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
|
||||
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
|
||||
| label | 选择器左侧文案 | string | - | - | - |
|
||||
| placeholder | 选择器占位符 | string | - | 请选择 | - |
|
||||
| disabled | 禁用 | boolean | - | fasle | - |
|
||||
| readonly | 只读 | boolean | - | false | - |
|
||||
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
|
||||
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
|
||||
| size | 设置选择器大小 | string | large | - | - |
|
||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||
| required | 表单属性，必填 | boolean | - | false | - |
|
||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||
| use-label-slot | label 使用插槽 | boolean | - | false | - |
|
||||
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
|
||||
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
|
||||
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
|
||||
| z-index | 弹窗层级 | number | - | 15 | - |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
|
||||
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
||||
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
|
||||
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
||||
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
|
||||
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
|
||||
|
||||
### FormItemRule 数据结构
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| required | 是否为必选字段 | `boolean` |
|
||||
| message | 错误提示文案 | `string` |
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | ------------------------------------------------------- | ------------------------------------- |
|
||||
| required | 是否为必选字段 | `boolean` |
|
||||
| message | 错误提示文案 | `string` |
|
||||
| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
|
||||
| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
|
||||
| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
|
||||
| cancel | 点击左侧按钮触发 | - | - |
|
||||
| open | 打开选择器弹出层时触发 | - | - |
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| -------- | ---------------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
|
||||
| confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
|
||||
| cancel | 点击左侧按钮触发 | - | - |
|
||||
| open | 打开选择器弹出层时触发 | - | - |
|
||||
|
||||
## Methods
|
||||
|
||||
| 方法名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| open | 打开picker弹框 | - | - |
|
||||
| close | 关闭picker弹框 | - | - |
|
||||
| 方法名称 | 说明 | 参数 | 最低版本 |
|
||||
| -------- | -------------- | ---- | -------- |
|
||||
| open | 打开picker弹框 | - | - |
|
||||
| close | 关闭picker弹框 | - | - |
|
||||
|
||||
## Slot
|
||||
|
||||
| name | 说明 | 最低版本 |
|
||||
|------|-----|---------|
|
||||
| default | 使用默认插槽 | - |
|
||||
| label | 左侧标题插槽 | - |
|
||||
| name | 说明 | 最低版本 |
|
||||
| ------- | ------------ | -------- |
|
||||
| default | 使用默认插槽 | - |
|
||||
| label | 左侧标题插槽 | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| custom-class | 根节点样式 | - |
|
||||
| custom-view-class | pickerView 外部自定义样式 | - |
|
||||
| custom-label-class | label 外部自定义样式 | - |
|
||||
| custom-value-class | value 外部自定义样式 | - |
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
| ------------------ | ------------------------- | -------- |
|
||||
| custom-class | 根节点样式 | - |
|
||||
| custom-view-class | pickerView 外部自定义样式 | - |
|
||||
| custom-label-class | label 外部自定义样式 | - |
|
||||
| custom-value-class | value 外部自定义样式 | - |
|
||||
|
||||
@ -80,6 +80,14 @@ const value = ref<string[]>(['101'])
|
||||
<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` 属性。
|
||||
@ -314,44 +322,45 @@ function handleConfirm({ value, selectedItems }) {
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | -------- |
|
||||
| v-model | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string | array / number / boolean / string | - | - | - |
|
||||
| columns | 选择器数据，一维数组 | array | - | - | - |
|
||||
| type | 单复选选择器类型 | string | checkbox / radio | checkbox | - |
|
||||
| value-key | 选项对象中，value 对应的 key | string | - | value | - |
|
||||
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
|
||||
| title | 弹出层标题 | string | - | - | - |
|
||||
| label | 选择器左侧文案 | string | - | - | - |
|
||||
| placeholder | 选择器占位符 | string | - | 请选择 | - |
|
||||
| disabled | 禁用 | boolean | - | fasle | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - |
|
||||
| readonly | 只读 | boolean | - | false | - |
|
||||
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
|
||||
| confirm-button-text | 确认按钮文案 | string | - | 确认 | - |
|
||||
| size | 设置选择器大小 | string | large | - | - |
|
||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||
| required | 必填样式 | boolean | - | false | - |
|
||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||
| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - |
|
||||
| select-size | 设置 picker 内部的选项组尺寸大小 （单/复选框） | string | large | - | - |
|
||||
| min | 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - |
|
||||
| max | 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - |
|
||||
| checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - |
|
||||
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
|
||||
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
|
||||
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
|
||||
| z-index | 弹窗层级 | number | - | 15 | - |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
|
||||
| filterable | 可搜索（目前只支持本地搜索） | boolean | - | false | - |
|
||||
| filter-placeholder | 搜索框占位符 | string | - | 搜索 | - |
|
||||
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
||||
| scroll-into-view | 重新打开是否滚动到选中项 | boolean | - | true | 0.1.34 |
|
||||
| show-confirm | 是否显示确认按钮（仅`radio`类型生效） | boolean | | true | 1.2.8 |
|
||||
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
|
||||
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | ---------------- |
|
||||
| v-model | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string | array / number / boolean / string | - | - | - |
|
||||
| columns | 选择器数据，一维数组 | array | - | - | - |
|
||||
| type | 单复选选择器类型 | string | checkbox / radio | checkbox | - |
|
||||
| value-key | 选项对象中，value 对应的 key | string | - | value | - |
|
||||
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
|
||||
| title | 弹出层标题 | string | - | - | - |
|
||||
| label | 选择器左侧文案 | string | - | - | - |
|
||||
| placeholder | 选择器占位符 | string | - | 请选择 | - |
|
||||
| disabled | 禁用 | boolean | - | fasle | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - |
|
||||
| readonly | 只读 | boolean | - | false | - |
|
||||
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
|
||||
| confirm-button-text | 确认按钮文案 | string | - | 确认 | - |
|
||||
| size | 设置选择器大小 | string | large | - | - |
|
||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||
| required | 必填样式 | boolean | - | false | - |
|
||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||
| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - |
|
||||
| select-size | 设置 picker 内部的选项组尺寸大小 （单/复选框） | string | large | - | - |
|
||||
| min | 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - |
|
||||
| max | 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） | number | - | 0 | - |
|
||||
| checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - |
|
||||
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
|
||||
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
|
||||
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
|
||||
| z-index | 弹窗层级 | number | - | 15 | - |
|
||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
|
||||
| filterable | 可搜索（目前只支持本地搜索） | boolean | - | false | - |
|
||||
| filter-placeholder | 搜索框占位符 | string | - | 搜索 | - |
|
||||
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
||||
| scroll-into-view | 重新打开是否滚动到选中项 | boolean | - | true | 0.1.34 |
|
||||
| show-confirm | 是否显示确认按钮（仅`radio`类型生效） | boolean | | true | 1.2.8 |
|
||||
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
|
||||
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
||||
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
|
||||
|
||||
### FormItemRule 数据结构
|
||||
|
||||
@ -377,8 +386,8 @@ function handleConfirm({ value, selectedItems }) {
|
||||
| confirm | 点击确认时触发 | event.detail = { value, selectedItems }, checkbox 类型时 value 和 selectedItems 为数组，radio 类型为非数组 | - |
|
||||
| change | picker 内选项更改时触发 | `{ value }`, checkbox 类型时 value 为数组，radio 类型为非数组 | - |
|
||||
| cancel | 点击关闭按钮或者蒙层时触发 | - | - |
|
||||
| close | 弹窗关闭时触发 | - | 1.2.29 |
|
||||
| open | 弹窗打开时触发 | - | 1.2.29 |
|
||||
| close | 弹窗关闭时触发 | - | 1.2.29 |
|
||||
| open | 弹窗打开时触发 | - | 1.2.29 |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
<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="value11" :columns="columns0" required />
|
||||
<wd-picker label="可清空" :clearable="true" v-model="value15" :columns="columns5" :column-change="onChangeDistrict" />
|
||||
</wd-cell-group>
|
||||
</demo-block>
|
||||
<demo-block title="label 不传" transparent>
|
||||
@ -105,6 +106,7 @@ const columns4 = ref([
|
||||
])
|
||||
|
||||
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 value6 = ref(['中南大学', '软件工程'])
|
||||
|
||||
@ -14,10 +14,19 @@
|
||||
<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="错误" 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="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="可清空"
|
||||
clearable
|
||||
type="radio"
|
||||
:show-confirm="false"
|
||||
v-model="value20"
|
||||
:columns="columns1"
|
||||
@confirm="handleConfirm2"
|
||||
/>
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
<demo-block title="label不传" transparent>
|
||||
@ -128,6 +137,7 @@ const value16 = ref<string[]>(['103'])
|
||||
const value17 = ref<string[]>(['102'])
|
||||
const value18 = ref<string>('102')
|
||||
const value19 = ref<string>('101')
|
||||
const value20 = ref<string>('101')
|
||||
|
||||
const customShow = ref<string>('奢侈品')
|
||||
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
|
||||
:deep(.wd-picker__arrow){
|
||||
:deep(.wd-picker__arrow),
|
||||
:deep(.wd-picker__clear) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
|
||||
@ -78,13 +79,15 @@
|
||||
.wd-picker__cell {
|
||||
font-size: $-cell-title-fs-large;
|
||||
}
|
||||
:deep(.wd-picker__arrow) {
|
||||
:deep(.wd-picker__arrow),
|
||||
:deep(.wd-picker__clear) {
|
||||
font-size: $-cell-icon-size-large;
|
||||
}
|
||||
}
|
||||
@include when(error) {
|
||||
.wd-picker__value,
|
||||
:deep(.wd-picker__arrow) {
|
||||
:deep(.wd-picker__arrow),
|
||||
:deep(.wd-picker__clear) {
|
||||
color: $-input-error-color;
|
||||
}
|
||||
}
|
||||
@ -170,7 +173,7 @@
|
||||
color: $-input-placeholder-color;
|
||||
}
|
||||
|
||||
@include edeep(arrow) {
|
||||
@include edeep(arrow,clear) {
|
||||
display: block;
|
||||
font-size: $-cell-icon-size;
|
||||
color: $-cell-arrow-color;
|
||||
|
||||
@ -147,7 +147,11 @@ export const pickerProps = {
|
||||
/**
|
||||
* 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
|
||||
*/
|
||||
immediateChange: makeBooleanProp(false)
|
||||
immediateChange: makeBooleanProp(false),
|
||||
/**
|
||||
* 显示清空按钮
|
||||
*/
|
||||
clearable: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
export type PickerProps = ExtractPropTypes<typeof pickerProps>
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
<view :class="`wd-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-picker__placeholder'}`">
|
||||
{{ showValue ? showValue : placeholder || translate('placeholder') }}
|
||||
</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 v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
|
||||
</view>
|
||||
@ -384,6 +385,21 @@ function setLoading(loading: boolean) {
|
||||
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>({
|
||||
close,
|
||||
open,
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
}
|
||||
|
||||
:deep(.wd-select-picker__arrow),
|
||||
:deep(.wd-select-picker__close) {
|
||||
:deep(.wd-select-picker__close),
|
||||
:deep(.wd-select-picker__clear) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
|
||||
@ -71,14 +72,16 @@
|
||||
.wd-select-picker__value {
|
||||
color: $-input-error-color;
|
||||
}
|
||||
:deep(.wd-select-picker__arrow) {
|
||||
:deep(.wd-select-picker__arrow),
|
||||
:deep(.wd-select-picker__clear) {
|
||||
color: $-input-error-color;
|
||||
}
|
||||
}
|
||||
@include when(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;
|
||||
}
|
||||
}
|
||||
@ -129,7 +132,7 @@
|
||||
@include e(body) {
|
||||
flex: 1;
|
||||
}
|
||||
@include edeep(arrow) {
|
||||
@include edeep(arrow, clear) {
|
||||
display: block;
|
||||
font-size: $-cell-icon-size;
|
||||
color: $-cell-arrow-color;
|
||||
|
||||
@ -83,7 +83,11 @@ export const selectPickerProps = {
|
||||
/** 自定义值样式类 */
|
||||
customValueClass: makeStringProp(''),
|
||||
/** 是否显示确认按钮（radio类型生效），默认值为：true */
|
||||
showConfirm: makeBooleanProp(true)
|
||||
showConfirm: makeBooleanProp(true),
|
||||
/**
|
||||
* 显示清空按钮
|
||||
*/
|
||||
clearable: makeBooleanProp(false)
|
||||
}
|
||||
export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
|
||||
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
>
|
||||
{{ showValue || placeholder || translate('placeholder') }}
|
||||
</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 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'
|
||||
})
|
||||
|
||||
// 是否展示清除按钮
|
||||
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>({
|
||||
close,
|
||||
open
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user