Vant

日本語

繁體中文
简体中文
English

日本語

繁體中文
简体中文
English

Appearance

Search 検索 - Vant 4

🔍 Search 検索 ​

🎯 紹介 ​

検索シーン向けの入力コンポーネントです。双方向バインディング、背景色のカスタマイズ、イベント監視に対応し、リストやフィルター機能と組み合わせて使用します。

📦 導入 ​

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

js
import { createApp } from'vue'; import { Search } from'vant'; const app = createApp(); app.use(Search);

🎯 コード例 ​

🔍 基本用法 ​

最もシンプルな検索ボックス！v-model で検索内容を双方向バインディングし、background で外観を簡単にカスタマイズできます。

html
<template>
  <div class="demo-search">
    <!-- 基本の検索ボックス -->
    <van-search v-model="value" placeholder="検索キーワードを入力" />
    <p>現在の入力：{{ value }}</p>
    
    <!-- 背景色のカスタマイズ -->
    <van-search 
      v-model="value2" 
      placeholder="背景色をカスタム" 
      background="#4fc08d" 
    />
  </div>
</template>
js
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const value2 = ref('');
    
    return { 
      value,
      value2 
    };
  },
};

🎯 イベント監視 ​

検索をよりスマートに！search と cancel を監視して、検索確定とキャンセルのインタラクションを実現します。

html
<template>
  <div class="demo-search">
    <van-search
      v-model="searchValue"
      placeholder="キーワード入力後に Enter で検索"
      show-action
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
      @blur="onBlur"
    />
    
    <div class="search-result" v-if="searchResult">
      <p>検索結果：{{ searchResult }}</p>
    </div>
  </div>
</template>
js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const searchValue = ref('');
    const searchResult = ref('');
    
    const onSearch = (val) => {
      searchResult.value = `"${val}" を検索中...`;
      showToast(`検索：${val}`);
    };
    
    const onCancel = () => {
      searchValue.value = '';
      searchResult.value = '';
      showToast('検索をキャンセルしました');
    };
    
    const onFocus = () => {
      showToast('検索ボックスがフォーカスしました');
    };
    
    const onBlur = () => {
      showToast('検索ボックスのフォーカスが外れました');
    };
    
    return { 
      searchValue,
      searchResult,
      onSearch, 
      onCancel,
      onFocus,
      onBlur
    };
  },
};

💡 ヒント：van-search の外側に form を追加し、action を設定すると iOS のキーボードに検索ボタンが表示されます。

📐 検索内容の配置 ​

文字の揃えを制御！input-align で検索内容の揃えを設定し、異なる見た目を作れます。

html
<template>
  <div class="demo-search">
    <!-- 左寄せ（デフォルト） -->
    <van-search 
      v-model="leftValue" 
      placeholder="左寄せ（デフォルト）" 
      input-align="left"
    />
    
    <!-- 中央寄せ -->
    <van-search 
      v-model="centerValue" 
      placeholder="中央寄せ" 
      input-align="center"
    />
    
    <!-- 右寄せ -->
    <van-search 
      v-model="rightValue" 
      placeholder="右寄せ" 
      input-align="right"
    />
  </div>
</template>
js
import { ref } from 'vue';

export default {
  setup() {
    const leftValue = ref('');
    const centerValue = ref('');
    const rightValue = ref('');
    
    return { 
      leftValue,
      centerValue,
      rightValue
    };
  },
};

🚫 検索ボックスを無効化 ​

一時的に検索を無効にしたい場合は、disabled で簡単に切り替えられ、UI の一貫性を保てます。

html
<template>
  <div class="demo-search">
    <!-- 通常状態 -->
    <van-search 
      v-model="normalValue" 
      placeholder="通常状態の検索ボックス" 
    />
    
    <!-- 無効状態 -->
    <van-search 
      v-model="disabledValue" 
      placeholder="無効状態の検索ボックス" 
      disabled
    />
    
    <!-- 読み取り専用 -->
    <van-search 
      v-model="readonlyValue" 
      placeholder="読み取り専用の検索ボックス" 
      readonly
    />
  </div>
</template>
js
import { ref } from 'vue';

export default {
  setup() {
    const normalValue = ref('');
    const disabledValue = ref('無効');
    const readonlyValue = ref('読み取り専用');
    
    return { 
      normalValue,
      disabledValue,
      readonlyValue
    };
  },
};

🎨 背景色と形状のカスタマイズ ​

让搜索框更有个性！通过 background 和 shape 属性打造独特的视觉风格。

html
<template>
  <div class="demo-search">
    <!-- 四角形検索ボックス（デフォルト） -->
    <van-search 
      v-model="squareValue" 
      placeholder="四角形の検索ボックス" 
      background="#f7f8fa"
      shape="square"
    />
    
    <!-- 角丸検索ボックス -->
    <van-search 
      v-model="roundValue" 
      placeholder="角丸の検索ボックス" 
      background="#fff2e8"
      shape="round"
    />
    
    <!-- グラデーション背景 -->
    <van-search 
      v-model="gradientValue" 
      placeholder="グラデーション背景の検索ボックス" 
      background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
      shape="round"
    />
  </div>
</template>
js
import { ref } from 'vue';

export default {
  setup() {
    const squareValue = ref('');
    const roundValue = ref('');
    const gradientValue = ref('');
    
    return { 
      squareValue,
      roundValue,
      gradientValue
    };
  },
};

🎛️ ボタンのカスタマイズ ​

より個性的な操作ボタンが必要な場合は、action スロットで右側ボタンをカスタマイズし、より豊かなインタラクションを実現できます。

html
<template>
  <div class="demo-search">
    <!-- カスタム文字ボタン -->
    <van-search 
      v-model="customValue" 
      placeholder="ボタン文言をカスタム"
      show-action
    >
      <template #action>
        <div @click="onClickButton" class="search-action">
          検索
        </div>
      </template>
    </van-search>
    
    <!-- カスタムアイコンボタン -->
    <van-search 
      v-model="iconValue" 
      placeholder="アイコンボタンをカスタム"
      show-action
    >
      <template #action>
        <van-icon 
          name="search" 
          @click="onClickIcon" 
          class="search-icon"
        />
      </template>
    </van-search>
    
    <!-- 複数のカスタムボタン -->
    <van-search 
      v-model="multiValue" 
      placeholder="複数のカスタムボタン"
      show-action
    >
      <template #action>
        <van-button 
          size="small" 
          type="primary" 
          @click="onSearch"
        >
          検索
        </van-button>
        <van-button 
          size="small" 
          @click="onClear"
          style="margin-left: 8px;"
        >
          クリア
        </van-button>
      </template>
    </van-search>
  </div>
</template>
js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const customValue = ref('');
    const iconValue = ref('');
    const multiValue = ref('');
    
    const onClickButton = () => {
      showToast(`検索：${customValue.value}`);
    };
    
    const onClickIcon = () => {
      showToast(`アイコン検索：${iconValue.value}`);
    };
    
    const onSearch = () => {
      showToast(`検索を実行：${multiValue.value}`);
    };
    
    const onClear = () => {
      multiValue.value = '';
      showToast('検索内容をクリアしました');
    };
    
    return { 
      customValue,
      iconValue,
      multiValue,
      onClickButton,
      onClickIcon,
      onSearch,
      onClear
    };
  },
};
css
.search-action {
  padding: 0 16px;
  color: #1989fa;
  font-size: 14px;
  line-height: 34px;
  cursor: pointer;
}

.search-icon {
  padding: 0 16px;
  color: #1989fa;
  font-size: 16px;
  line-height: 34px;
  cursor: pointer;
}

📖 API ​

🎛️ Props ​

属性名説明型デフォルト
v-model🔗 現在の入力値（双方向バインディング）number | string-
label🏷️ 検索ボックス左側のラベルstring-
name📝 フォーム送信時の識別子string-
shape🔘 形状。square 四角、round 角丸stringsquare
id🆔 検索ボックスの id（label の for にも設定）stringvan-search-n-input
background🎨 外部背景色（グラデーション可）string#f2f2f2
maxlength📏 入力文字数の上限number | string-
placeholder💬 プレースホルダーstring-
clearable🗑️ クリアアイコンを有効化（クリックで入力欄をクリア）booleantrue
clear-icon🧹 クリアアイコン名または画像リンクstringclear
clear-trigger👁️ クリアアイコン表示のタイミング（always/focus）stringfocus
autofocus🎯 自動フォーカス（iOS 非対応）booleanfalse
show-action🎬 右側に操作ボタンを表示するかbooleanfalse
action-text📝 操作ボタンの文言string取消
disabled🚫 入力欄を無効化するかbooleanfalse
readonly👀 入力欄を読み取り専用にするかbooleanfalse
error❌ 入力内容をエラー表示にするかbooleanfalse
error-message💥 下部のエラーメッセージ（空なら非表示）string-
formatter🔧 入力内容の整形関数(val: string) => string-
format-trigger⚡ 整形関数のトリガー（onChange/onBlur）stringonChange
input-align📐 入力内容の配置（left/center/right）stringleft
left-icon🔍 左側アイコン名または画像リンクstringsearch
right-icon➡️ 右側アイコン名または画像リンクstring-
autocomplete🤖 input のネイティブ自動補完属性string-

🎯 Events ​

イベント名説明コールバック引数
search🔍 検索確定時（Enter または検索ボタン）に発火value: string (現在の入力値)
update:model-value📝 入力欄内容の変化時に発火value: string (現在の入力値)
focus🎯 入力欄がフォーカスしたときに発火event: Event
blur😴 入力欄がフォーカスを失ったときに発火event: Event
click-input👆 入力領域をクリック時に発火event: MouseEvent
click-left-icon⬅️ 左側アイコンをクリック時に発火event: MouseEvent
click-right-icon➡️ 右側アイコンをクリック時に発火event: MouseEvent
clear🗑️ クリアボタンをクリック後に発火event: MouseEvent
cancel❌ キャンセルボタンをクリック時に発火-

🔧 Methods ​

ref で Search インスタンスを取得してメソッドを呼び出せます。詳細はコンポーネントインスタンスのメソッドを参照してください。

メソッド名説明引数戻り値
focus🎯 入力欄にフォーカス--
blur😴 入力欄のフォーカスを解除--

📝 型定義 ​

コンポーネントは以下の型定義をエクスポートし、TypeScript 開発を容易にします：

ts
import type { SearchProps, SearchShape, SearchInstance } from 'vant';

SearchInstance はコンポーネントインスタンスの型です。使用例：

ts
import { ref } from 'vue';
import type { SearchInstance } from 'vant';

const searchRef = ref<SearchInstance>();
searchRef.value?.focus();

🎨 Slots ​

名称説明
left⬅️ 左側のカスタムコンテンツ（検索ボックス外）
action🎬 右側のカスタムコンテンツ（検索ボックス外）。show-action 設定時に表示
label🏷️ 左側のカスタムテキスト（検索ボックス内）
left-icon🔍 左側のカスタムアイコン（検索ボックス内）
right-icon➡️ 右側のカスタムアイコン（検索ボックス内）

🎨 テーマカスタマイズ ​

🎛️ スタイル変数 ​

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。

名称デフォルト値説明
--van-search-padding10px var(--van-padding-sm)🔲 検索ボックス全体の内側余白
--van-search-backgroundvar(--van-background-2)🎨 外部背景色
--van-search-content-backgroundvar(--van-gray-1)🎨 コンテンツ領域の背景色
--van-search-input-height34px📏 入力欄の高さ
--van-search-label-padding0 5px🔲 ラベルの内側余白
--van-search-label-colorvar(--van-text-color)🎨 ラベル文字色
--van-search-label-font-sizevar(--van-font-size-md)📝 ラベル文字サイズ
--van-search-left-icon-colorvar(--van-gray-6)🎨 左側アイコン色
--van-search-action-padding0 var(--van-padding-xs)🔲 操作ボタンの内側余白
--van-search-action-text-colorvar(--van-text-color)🎨 操作ボタン文字色
--van-search-action-font-sizevar(--van-font-size-md)📝 操作ボタン文字サイズ

よくある質問 ​

デスクトップでクリアボタンが効かない？ ​

クリアボタンはモバイルの Touch イベントを監視しています。デスクトップ対応 を参照してください。

📚 関連ドキュメント ​

📝 フォームコンポーネント ​

  • Field 入力欄 - 基本的な入力欄コンポーネント。多様な入力タイプに対応
  • Form フォーム - フォームコンテナコンポーネント。データ収集と検証機能

🎛️ インタラクションコンポーネント ​

  • Button ボタン - 検索操作に利用可能なボタンコンポーネント
  • Icon アイコン - 検索アイコンや装飾アイコンを提供
  • Cell セル - 検索ボックスと組み合わせて使用可能なセルコンポーネント

🎨 フィードバックコンポーネント ​

🔧 ツールコンポーネント ​

Vant に基づく企業向けモバイルソリューション

Copyright © 2025 siex.cn ｜ sitemap