Search Search

introduce

Input box component for search scenarios.

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>

Props

Events

method

Through ref, you can get the Search instance and call the instance method.

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.