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
@ -4,7 +4,6 @@
|
||||
|
||||
Picker 组件为 popup 和 pickerView 的组合。
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
|
||||
@ -25,7 +24,7 @@ function handleConfirm({ value }) {
|
||||
当 `columns` 选项为对象时，其数据结构为：
|
||||
|
||||
| 参数 | 类型 | 说明 | 最低版本 |
|
||||
|-----|-----|------|---------|
|
||||
| -------- | ------------------------- | -------------------------------------------------------- | -------- |
|
||||
| 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(['中南大学', '软件工程'])
|
||||
|
||||
@ -231,8 +241,8 @@ function handleConfirm({ value }) {
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
|
||||
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ | ------- | ---------------- |
|
||||
| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
|
||||
| columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
|
||||
| loading | 加载中 | boolean | - | false | - |
|
||||
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
|
||||
@ -263,11 +273,12 @@ function handleConfirm({ value }) {
|
||||
| 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` |
|
||||
| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
|
||||
@ -276,7 +287,7 @@ function handleConfirm({ value }) {
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| -------- | ---------------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
|
||||
| confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
|
||||
| cancel | 点击左侧按钮触发 | - | - |
|
||||
| open | 打开选择器弹出层时触发 | - | - |
|
||||
@ -284,21 +295,21 @@ function handleConfirm({ value }) {
|
||||
## Methods
|
||||
|
||||
| 方法名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| -------- | -------------- | ---- | -------- |
|
||||
| open | 打开picker弹框 | - | - |
|
||||
| close | 关闭picker弹框 | - | - |
|
||||
|
||||
## Slot
|
||||
|
||||
| name | 说明 | 最低版本 |
|
||||
|------|-----|---------|
|
||||
| ------- | ------------ | -------- |
|
||||
| default | 使用默认插槽 | - |
|
||||
| label | 左侧标题插槽 | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| ------------------ | ------------------------- | -------- |
|
||||
| custom-class | 根节点样式 | - |
|
||||
| custom-view-class | pickerView 外部自定义样式 | - |
|
||||
| custom-label-class | label 外部自定义样式 | - |
|
||||
|
||||
@ -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` 属性。
|
||||
@ -315,7 +323,7 @@ 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 | - |
|
||||
@ -352,6 +360,7 @@ function handleConfirm({ value, selectedItems }) {
|
||||
| show-confirm | 是否显示确认按钮（仅`radio`类型生效） | boolean | | true | 1.2.8 |
|
||||
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
|
||||
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
||||
| clearable | 显示清空按钮 | boolean | - | false | $LOWEST_VERSION$ |
|
||||
|
||||
### FormItemRule 数据结构
|
||||
|
||||
|
||||
@ -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