Vant3 Search 搜索

介紹

用于搜索場(chǎng)景的輸入框組件。

實(shí)例演示

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Search } from 'vant';

const app = createApp();
app.use(Search);

代碼演示

基礎(chǔ)用法

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 };
  },
};

事件監(jiān)聽

Search 組件提供了 search 和 cancel 事件，search 事件在點(diǎ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 { Toast } from 'vant';

export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => Toast(val);
    const onCancel = () => Toast('取消');
    return {
      value,
      onSearch,
      onCancel,
    };
  },
};

Tips: 在 van-search 外層增加 form 標(biāo)簽，且 action 不為空，即可在 iOS 輸入法中顯示搜索按鈕。

搜索框內(nèi)容對(duì)齊

通過 input-align 屬性設(shè)置搜索框內(nèi)容的對(duì)齊方式，可選值為 center、right。

<van-search
  v-model="value"
  placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
  input-align="center"
/>

禁用搜索框

通過 disabled 屬性禁用搜索框。

<van-search v-model="value" disabled placeholder="請(qǐng)輸入搜索關(guān)鍵詞" />

自定義背景色

通過 background 屬性可以設(shè)置搜索框外部的背景色，通過 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="onSearch">搜索</div>
  </template>
</van-search>

API

Props

Events

方法

通過 ref 可以獲取到 Search 實(shí)例并調(diào)用實(shí)例方法，詳見組件實(shí)例方法。

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見問題

在桌面端點(diǎn)擊清除按鈕無(wú)效？

清除按鈕監(jiān)聽是的移動(dòng)端 Touch 事件，參見桌面端適配。