Vant4 Search 搜索

介紹

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

引入

通過以下方式來全局注冊(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 { 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 輸入法中顯示搜索按鈕。

搜索框內(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="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,
    };
  },
};

API

Props

Events

方法

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

類型定義

組件導(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();

Slots

主題定制

樣式變量

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

常見問題

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

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