Search
Search box component, supports input focus, blur, input, search, cancel, and clear events.
Component Types
Basic Usage
v-model sets the input box binding value, change listens for input events, search listens for search events, cancel listens for cancel events, clear listens for clear events.
html
<wd-search v-model="value" @search="search" @clear="clear" @cancel="cancel" @change="change" />ts
const value = ref<string>('')
function search({ value }: { value: string }) {
console.log('Search', value)
}
function clear() {
console.log('Reset')
}
function cancel({ value }: { value: string }) {
console.log('Cancel', value)
}
function change({ value }: { value: string }) {
console.log('Input', value)
}Component States
Auto Focus
Set the focus property, the component will automatically focus after mounting.
html
<wd-search v-model="value" focus />Auto Focus After Clear
Set focus-when-clear, the input box will refocus after clicking the clear button.
html
<wd-search v-model="value" focus-when-clear />Disable and Hide Cancel Button
Set disabled and hide-cancel. Can be used for entry scenarios that jump to a standalone search page.
html
<wd-search disabled hide-cancel @click="handleDisabledClick" />Component Variants
Style Variants
Switch between different visual styles through variant, optional values are plain, filled, light.
html
<wd-search variant="plain" v-model="value" />
<wd-search variant="filled" v-model="value" />
<wd-search variant="light" v-model="value" />Component Styles
Input Box Placeholder Left-aligned
Set the placeholder-left property.
html
<wd-search placeholder-left />Set Maximum Length
Limit the maximum length of the input box through maxlength, -1 means no limit.
html
<wd-search v-model="value" :maxlength="4" />Custom Text
Modify placeholder text through placeholder, and modify cancel button text through cancel-txt.
html
<wd-search placeholder="Please enter order number/order name" cancel-txt="Search" />Special Styles
Custom Left Slot
Customize the left content of the search box through the prefix slot.
html
<wd-search v-model="value">
<template #prefix>
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
<view class="search-type">
<text>{{ searchType }}</text>
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
</view>
</wd-popover>
</template>
</wd-search>typescript
const searchType = ref<string>('All')
const value = ref<string>('')
const menu = ref([
{
content: 'All'
},
{
content: 'Order Number'
},
{
content: 'Refund Order Number'
}
])
function changeSearchType({ item }) {
searchType.value = item.content
}scss
.search-type {
position: relative;
height: 30px;
line-height: 30px;
padding: 0 8px 0 16px;
}
.search-type::after {
position: absolute;
content: '';
width: 1px;
right: 0;
top: 5px;
bottom: 5px;
background: rgba(0, 0, 0, 0.25);
}
.search-type {
:deep(.icon-arrow) {
display: inline-block;
font-size: 20px;
vertical-align: middle;
}
}Custom Input Box Right Icon
html
<wd-search v-model="value">
<template #input-suffix>
<wd-icon name="scan" size="20px"></wd-icon>
</template>
</wd-search>Custom Right Slot
html
<wd-search v-model="value">
<template #suffix>
<view>Filter Conditions</view>
</template>
</wd-search>Multiple Slot Combinations
html
<wd-search variant="plain" v-model="value">
<template #input-suffix>
<wd-icon name="scan" size="20px"></wd-icon>
</template>
<template #suffix>
<view class="action-icons">
<wd-icon name="filter" size="20px"></wd-icon>
<wd-icon name="plus-circle-fill" size="20px"></wd-icon>
</view>
</template>
</wd-search>Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| v-model | Input box content, two-way binding | string | '' |
| custom-input-class | Custom input box class name | string | '' |
| placeholder | Search box placeholder text | string | 'Search' |
| cancel-txt | Search box right text | string | 'Cancel' |
| variant | Search box variant, optional values are plain, filled, light | string | 'plain' |
| hide-cancel | Whether to hide the right text | boolean | false |
| disabled | Whether to disable the search box | boolean | false |
| maxlength | Native property, sets the maximum length, -1 means no limit | number | string | -1 |
| placeholder-left | Whether placeholder is left-aligned | boolean | false |
| focus v0.1.63 | Whether to auto focus | boolean | false |
| focus-when-clear v0.1.63 | Whether to focus the input box after clicking the clear button | boolean | false |
| placeholder-style v1.6.0 | Native property, specifies the style of the placeholder, currently only supports color, font-size and font-weight | string | - |
| placeholder-class v1.6.0 | Native property, specifies the style class of the placeholder | string | '' |
| custom-class | Root node custom class name | string | '' |
| custom-style | Root node custom style | string | '' |
Events
| Event Name | Description | Parameters |
|---|---|---|
| focus | Input box focus event | { value } |
| blur | Input box blur event | { value } |
| search | Input box search event | { value } |
| clear | Triggered when clicking the clear button | - |
| cancel | Triggered when clicking the right text | { value } |
| change | Triggered when input box content changes | { value } |
| click v1.14.0 | Triggered when clicking the component in disabled state | - |
Slots
| Name | Description |
|---|---|
| prefix | Custom content on the left side of the input box |
| input-suffix | Custom content on the right side inside the input box |
| suffix | Custom content on the right side of the input box |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-search-padding | $padding-tight $padding-loose | 组件整体内边距 |
| --wot-search-input-radius | $radius-radius-full | 输入框圆角 |
| --wot-search-input-height | $n-36 | 输入框高度 |
| --wot-search-field-padding | $padding-zero $padding-loose | 输入框内边距 |
| --wot-search-left-icon-margin-right | $spacing-super-tight | 输入框左侧搜索图标向右间距 |
| --wot-search-input-bg | $filled-bottom | 输入框背景色 (filled) |
| --wot-search-bg | $filled-oppo | 组件容器背景色 (filled) |
| --wot-search-cover-bg | $filled-bottom | 组件覆盖层背景色 (filled) |
| --wot-search-light-bg | $filled-bottom | light 模式容器背景色 |
| --wot-search-light-block-bg | $filled-oppo | light 模式内容块背景色 |
| --wot-search-light-cover-bg | $filled-oppo | light 模式覆盖层背景色 |
| --wot-search-plain-bg | $filled-oppo | plain 模式容器背景色 |
| --wot-search-plain-block-bg | $filled-oppo | plain 模式内容块背景色 |
| --wot-search-plain-block-border-color | $border-light | plain 模式内容块边框 |
| --wot-search-plain-cover-bg | $filled-oppo | plain 模式覆盖层背景色 |
| --wot-search-block-margin-right | $spacing-extra-tight | block 向右间距 |
| --wot-search-input-font-size | $typography-body-size-main | 输入框字号 |
| --wot-search-input-color | $text-main | 输入框文字颜色 |
| --wot-search-input-line-height | $typography-body-line--height-size-main | 输入框文字行高 |
| --wot-search-icon-color | $icon-secondary | 搜索图标颜色 |
| --wot-search-icon-size | $typography-title-size-main | 搜索图标大小 |
| --wot-search-clear-icon-size | $n-20 | 清除图标大小 |
| --wot-search-clear-icon-color | $icon-disabled | 清除图标颜色 |
| --wot-search-clear-icon-margin-left | $spacing-super-tight | 清除图标向右间距 |
| --wot-search-placeholder-color | $text-placeholder | 占位符颜色 |
| --wot-search-placeholder-font-size | $typography-body-size-main | 占位符字号 |
| --wot-search-placeholder-line-height | $typography-body-line--height-size-main | 占位符行高 |
| --wot-search-cancel-font-size | $typography-body-size-main | 取消按钮字号 |
| --wot-search-cancel-line-height | $typography-body-line--height-size-main | 取消按钮行高 |
| --wot-search-cancel-color | $primary-6 | 取消按钮颜色 |