mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 19:06:36 +08:00
[new feature] Search: add clearable prop
This commit is contained in:
parent
c0e2ce200e
commit
46a051cb05
@ -30,6 +30,7 @@
|
|||||||
|
|
||||||
##### Search
|
##### Search
|
||||||
|
|
||||||
|
- 新增`clearable`属性
|
||||||
- 新增`left-icon`属性
|
- 新增`left-icon`属性
|
||||||
- 新增`right-icon`属性
|
- 新增`right-icon`属性
|
||||||
- 新增`right-icon`插槽
|
- 新增`right-icon`插槽
|
||||||
|
@ -70,6 +70,7 @@ Search support all native properties of input tag,such as `maxlength`、`place
|
|||||||
| label | Search label | `String` | - |
|
| label | Search label | `String` | - |
|
||||||
| shape | Can be set to `round` | `String` | `square` |
|
| shape | Can be set to `round` | `String` | `square` |
|
||||||
| background | Background color | `String` | `#f2f2f2` |
|
| background | Background color | `String` | `#f2f2f2` |
|
||||||
|
| clearable | Whether to be clearable | `Boolean` | `true` |
|
||||||
| show-action | Whether to show right button | `Boolean` | `false` |
|
| show-action | Whether to show right button | `Boolean` | `false` |
|
||||||
| disabled | Whether to disable field | `Boolean` | `false` |
|
| disabled | Whether to disable field | `Boolean` | `false` |
|
||||||
| readonly | Whether to be readonly | `Boolean` | `false` |
|
| readonly | Whether to be readonly | `Boolean` | `false` |
|
||||||
|
@ -15,6 +15,7 @@ export type SearchProps = {
|
|||||||
label?: string;
|
label?: string;
|
||||||
leftIcon: string;
|
leftIcon: string;
|
||||||
rightIcon?: string;
|
rightIcon?: string;
|
||||||
|
clearable: boolean;
|
||||||
background: string;
|
background: string;
|
||||||
showAction?: boolean;
|
showAction?: boolean;
|
||||||
};
|
};
|
||||||
@ -92,12 +93,12 @@ function Search(
|
|||||||
<div class={bem('content', props.shape)}>
|
<div class={bem('content', props.shape)}>
|
||||||
{Label()}
|
{Label()}
|
||||||
<Field
|
<Field
|
||||||
clearable
|
|
||||||
type="search"
|
type="search"
|
||||||
border={false}
|
border={false}
|
||||||
value={props.value}
|
value={props.value}
|
||||||
leftIcon={props.leftIcon}
|
leftIcon={props.leftIcon}
|
||||||
rightIcon={props.rightIcon}
|
rightIcon={props.rightIcon}
|
||||||
|
clearable={props.clearable}
|
||||||
scopedSlots={{
|
scopedSlots={{
|
||||||
'left-icon': slots['left-icon'],
|
'left-icon': slots['left-icon'],
|
||||||
'right-icon': slots['right-icon']
|
'right-icon': slots['right-icon']
|
||||||
@ -119,6 +120,10 @@ Search.props = {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'square'
|
default: 'square'
|
||||||
},
|
},
|
||||||
|
clearable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
background: {
|
background: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#fff'
|
default: '#fff'
|
||||||
|
@ -63,9 +63,10 @@ Search 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`pl
|
|||||||
| label | 搜索框左侧文本 | `String` | - | 1.6.6 |
|
| label | 搜索框左侧文本 | `String` | - | 1.6.6 |
|
||||||
| shape | 形状,可选值为 `round` | `String` | `square` | 1.6.6 |
|
| shape | 形状,可选值为 `round` | `String` | `square` | 1.6.6 |
|
||||||
| background | 搜索框背景色 | `String` | `#f2f2f2` | - |
|
| background | 搜索框背景色 | `String` | `#f2f2f2` | - |
|
||||||
|
| clearable | 是否启用清除控件 | `Boolean` | `true` | 2.0.0 |
|
||||||
| show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | `false` | - |
|
| show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | `false` | - |
|
||||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
||||||
| readonly | 是否只读 | `Boolean` | `false` | - |
|
| readonly | 是否将输入框设为只读 | `Boolean` | `false` | - |
|
||||||
| error | 是否将输入内容标红 | `Boolean` | `false` | - |
|
| error | 是否将输入内容标红 | `Boolean` | `false` | - |
|
||||||
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | `String` | `left` | - |
|
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | `String` | `left` | - |
|
||||||
| left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件 | `String` | `search` | 2.0.0 |
|
| left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件 | `String` | `search` | 2.0.0 |
|
||||||
|
Loading…
x
Reference in New Issue
Block a user