用于搜索場(chǎng)景的輸入框組件。
通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { Search } from 'vant';
const app = createApp();
app.use(Search);
?v-model
? 用于控制搜索框中的文字,?background
? 可以自定義搜索框外部背景色。
<van-search v-model="value" placeholder="請(qǐng)輸入搜索關(guān)鍵詞" />
import { ref } from 'vue';
export default {
setup() {
const value = ref('');
return { value };
},
};
Search 組件提供了 ?search
? 和 ?cancel
? 事件,?search
? 事件在點(diǎn)擊鍵盤(pán)上的搜索/回車按鈕后觸發(fā),?cancel
? 事件在點(diǎn)擊搜索框右側(cè)取消按鈕時(shí)觸發(fā)。
<form action="/">
<van-search
v-model="value"
show-action
placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
@search="onSearch"
@cancel="onCancel"
/>
</form>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const value = ref('');
const onSearch = (val) => showToast(val);
const onCancel = () => showToast('取消');
return {
value,
onSearch,
onCancel,
};
},
};
Tips: 在 van-search 外層增加 form 標(biāo)簽,且 action 不為空,即可在 iOS 輸入法中顯示搜索按鈕。
通過(guò) ?input-align
? 屬性設(shè)置搜索框內(nèi)容的對(duì)齊方式,可選值為 ?center
?、?right
?。
<van-search
v-model="value"
placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
input-align="center"
/>
通過(guò) ?disabled
? 屬性禁用搜索框。
<van-search v-model="value" disabled placeholder="請(qǐng)輸入搜索關(guān)鍵詞" />
通過(guò) ?background
? 屬性可以設(shè)置搜索框外部的背景色,通過(guò) ?shape
? 屬性設(shè)置搜索框的形狀,可選值為 ?round
?。
<van-search
v-model="value"
shape="round"
background="#4fc08d"
placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
/>
使用 ?action
? 插槽可以自定義右側(cè)按鈕的內(nèi)容。使用插槽后,?cancel
? 事件將不再觸發(fā)。
<van-search
v-model="value"
show-action
label="地址"
placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
@search="onSearch"
>
<template #action>
<div @click="onClickButton">搜索</div>
</template>
</van-search>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const value = ref('');
const onSearch = (val) => showToast(val);
const onClickButton = () => showToast(value.value);
return {
value,
onSearch,
onClickButton,
};
},
};
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 當(dāng)前輸入的值 | number | string | - |
label | 搜索框左側(cè)文本 | string | - |
name v3.2.3
|
名稱,作為提交表單時(shí)的標(biāo)識(shí)符 | string | - |
shape | 搜索框形狀,可選值為 round
|
string | square
|
id v3.2.2
|
搜索框 id,同時(shí)會(huì)設(shè)置 label 的 for 屬性 | string | van-search-n-input
|
background | 搜索框外部背景色 | string | #f2f2f2
|
maxlength | 輸入的最大字符數(shù) | number | string | - |
placeholder | 占位提示文字 | string | - |
clearable | 是否啟用清除圖標(biāo),點(diǎn)擊清除圖標(biāo)后會(huì)清空輸入框 | boolean | true
|
clear-icon v3.0.12
|
清除圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | clear
|
clear-trigger | 顯示清除圖標(biāo)的時(shí)機(jī),always 表示輸入框不為空時(shí)展示,
focus 表示輸入框聚焦且不為空時(shí)展示 |
string | focus
|
autofocus | 是否自動(dòng)聚焦,iOS 系統(tǒng)不支持該屬性 | boolean | false
|
show-action | 是否在搜索框右側(cè)顯示取消按鈕 | boolean | false
|
action-text | 取消按鈕文字 | string | 取消
|
disabled | 是否禁用輸入框 | boolean | false
|
readonly | 是否將輸入框設(shè)為只讀狀態(tài),只讀狀態(tài)下無(wú)法輸入內(nèi)容 | boolean | false
|
error | 是否將輸入內(nèi)容標(biāo)紅 | boolean | false
|
error-message | 底部錯(cuò)誤提示文案,為空時(shí)不展示 | string | - |
formatter v3.0.12
|
輸入內(nèi)容格式化函數(shù) | (val: string) => string | - |
format-trigger v3.0.12
|
格式化函數(shù)觸發(fā)的時(shí)機(jī),可選值為 onBlur
|
string | onChange
|
input-align | 輸入框內(nèi)容對(duì)齊方式,可選值為 center right
|
string | left
|
left-icon | 輸入框左側(cè)圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | search
|
right-icon | 輸入框右側(cè)圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | - |
autocomplete v3.2.3
|
input 標(biāo)簽原生的自動(dòng)完成屬性 | string | - |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
search | 確定搜索時(shí)觸發(fā) | value: string (當(dāng)前輸入的值) |
update:model-value | 輸入框內(nèi)容變化時(shí)觸發(fā) | value: string (當(dāng)前輸入的值) |
focus | 輸入框獲得焦點(diǎn)時(shí)觸發(fā) | event: Event |
blur | 輸入框失去焦點(diǎn)時(shí)觸發(fā) | event: Event |
click-input | 點(diǎn)擊輸入?yún)^(qū)域時(shí)觸發(fā) | event: MouseEvent |
click-left-icon v3.4.0
|
點(diǎn)擊左側(cè)圖標(biāo)時(shí)觸發(fā) | event: MouseEvent |
click-right-icon 3.4.0
|
點(diǎn)擊右側(cè)圖標(biāo)時(shí)觸發(fā) | event: MouseEvent |
clear | 點(diǎn)擊清除按鈕后觸發(fā) | event: MouseEvent |
cancel | 點(diǎn)擊取消按鈕時(shí)觸發(fā) | - |
通過(guò) ref 可以獲取到 Search 實(shí)例并調(diào)用實(shí)例方法,詳見(jiàn)組件實(shí)例方法。
方法名 | 說(shuō)明 | 參數(shù) | 返回值 |
---|---|---|---|
focus | 獲取輸入框焦點(diǎn) | - | - |
blur | 取消輸入框焦點(diǎn) | - | - |
組件導(dǎo)出以下類型定義:
import type { SearchProps, SearchShape, SearchInstance } from 'vant';
?SearchInstance
? 是組件實(shí)例的類型,用法如下:
import { ref } from 'vue';
import type { SearchInstance } from 'vant';
const searchRef = ref<SearchInstance>();
searchRef.value?.focus();
名稱 | 說(shuō)明 |
---|---|
left | 自定義左側(cè)內(nèi)容(搜索框外) |
action | 自定義右側(cè)內(nèi)容(搜索框外),設(shè)置 show-action 屬性后展示 |
label | 自定義左側(cè)文本(搜索框內(nèi)) |
left-icon | 自定義左側(cè)圖標(biāo)(搜索框內(nèi)) |
right-icon | 自定義右側(cè)圖標(biāo)(搜索框內(nèi)) |
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-search-padding | 10px var(--van-padding-sm) | - |
--van-search-background | var(--van-background-2) | - |
--van-search-content-background | var(--van-gray-1) | - |
--van-search-input-height | 34px | - |
--van-search-label-padding | 0 5px | - |
--van-search-label-color | var(--van-text-color) | - |
--van-search-label-font-size | var(--van-font-size-md) | - |
--van-search-left-icon-color | var(--van-gray-6) | - |
--van-search-action-padding | 0 var(--van-padding-xs) | - |
--van-search-action-text-color | var(--van-text-color) | - |
--van-search-action-font-size | var(--van-font-size-md) | - |
清除按鈕監(jiān)聽(tīng)是的移動(dòng)端 Touch 事件,參見(jiàn)桌面端適配。
更多建議: