Search Search
introduce
Input box component for search scenarios.
Code Demo
Basic usage
v-model
is used to control the text in the search box, and background
can customize the external background color of the search box.
<z-search v-model="value" placeholder="请输入搜索关键词" />
import { ref } from 'vue';
const value = ref('');
Event monitoring
The Search component provides search
and cancel
events. The search
event is triggered after clicking the search/enter button on the keyboard, and the cancel
event is triggered when the cancel button on the right side of the search box is clicked.
<z-search
v-model="value"
show-action
placeholder="Please enter search keywords"
@search="onSearch"
@cancel="onCancel"
/>
Search box content alignment
Set the alignment of the search box content through the input-align
attribute. The optional values are center
and right
.
<z-search
v-model="value"
placeholder="Please enter search keywords"
input-align="center"
/>
Disable search box
Disable the search box via the disabled
attribute.
<z-search v-model="value" disabled placeholder="请输入搜索关键词" />
Custom background color
The background color outside the search box can be set through the background
attribute, and the shape of the search box can be set through the shape
attribute. The optional value is round
.
<z-search
v-model="value"
shape="round"
background="#4fc08d"
placeholder="Please enter search keywords"
/>
Custom buttons
Use the action
slot to customize the content of the right button. After using the slot, the cancel
event will no longer fire.
<z-search
v-model="value"
show-action
label="address"
placeholder="Please enter search keywords"
@search="onSearch"
>
<template #action>
<div @click="onClickButton">Search</div>
</template>
</z-search>
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | Current input value | number | string | - |
label | Text on the left side of the search box | string | - |
name | Name, used as an identifier when submitting the form | string | - |
shape | Search box shape, optional value is round | string | square |
background | Search box external background color | string | #f2f2f2 |
maxlength | Maximum number of characters entered | number | string | - |
placeholder | placeholder text | string | - |
clearable | Whether to enable the clear icon. Clicking the clear icon will clear the input box | boolean | true |
clear-icon | Clear the icon name or image link, which is equivalent to the name attribute of the Icon component | string | clear |
clear-trigger | The timing of displaying the clear icon, always means it will be displayed when the input box is not empty, focus means it will be displayed when the input box is focused and not empty | string | focus |
show-action | Whether to display the cancel button on the right side of the search box | boolean | false |
action-text | Cancel button text | string | Cancel |
disabled | Whether to disable the input box | boolean | false |
readonly | Whether to set the input box to read-only status. Content cannot be entered in read-only status | boolean | false |
error | Whether to mark the input content in red | boolean | false |
error-message | Bottom error message text, will not be displayed if empty | string | - |
formatter | Input content formatting function | (val: string) => string | - |
format-trigger | The timing when the format function is triggered, the optional value is onBlur | string | onChange |
input-align | Input box content alignment, optional values are center right | string | left |
left-icon | The icon name or image link on the left side of the input box, which is equivalent to the name attribute of the Icon component | string | search |
right-icon | The icon name or image link on the right side of the input box, which is equivalent to the name attribute of the Icon component | string | - |
Events
Event name | Description | Callback parameters |
---|---|---|
search | Triggered when search is determined | value: string (currently entered value) |
update:model-value | Triggered when the content of the input box changes | value: string (currently entered value) |
focus | Triggered when the input box gains focus | event: Event |
blur | Triggered when the input box loses focus | event: Event |
click-input | Triggered when the input area is clicked | event: MouseEvent |
click-left-icon | Triggered when the left icon is clicked | event: MouseEvent |
click-right-icon | Triggered when the right icon is clicked | event: MouseEvent |
clear | Triggered after clicking the clear button | event: MouseEvent |
cancel | Triggered when the cancel button is clicked | - |
method
Through ref, you can get the Search instance and call the instance method.
Method name | Description | Parameters | Return value |
---|---|---|---|
focus | Get input box focus | - | - |
blur | Cancel focus of input box | - | - |
Slots
Name | Description |
---|---|
left | Customize the content on the left (outside the search box) |
action | Customize the content on the right (outside the search box) and display it after setting the show-action attribute |
label | Customize the left text (in the search box) |
left-icon | Customize the left icon (in the search box) |
right-icon | Customize the right icon (in the search box) |
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
Name | Default | Description |
---|---|---|
--z-search-padding | 20rpx var(--z-padding-sm) | - |
--z-search-background | var(--z-background-2) | - |
--z-search-content-background | var(--z-gray-1) | - |
--z-search-input-height | 68rpx | - |
--z-search-label-padding | 0 10rpx | - |
--z-search-label-color | var(--z-text-color) | - |
--z-search-label-font-size | var(--z-font-size-md) | - |
--z-search-left-icon-color | var(--z-gray-6) | - |
--z-search-action-padding | 0 var(--z-padding-xs) | - |
--z-search-action-text-color | var(--z-text-color) | - |
--z-search-action-font-size | var(--z-font-size-md) | - |