vue search input

vue-検索-入力

Storybook と GitHub のグローバル検索入力からインスピレーションを得た、Vue.js 3 検索入力コンポーネント。

SearchInputコンポーネントは、いくつかの追加機能が組み込まれた検索入力を表示します。

特徴：

• キーボードの/キーを押すと、いつでも検索入力に集中できます。
• デフォルトの CSS スタイルが含まれていますが、独自のスタイルを持ち込むことも簡単です。
• slots経由でアイコンを完全にカスタマイズ可能
• 検索入力の右側にxアイコンを表示します。これは、値が入力されている場合にテキストをクリアするために使用されます。
• 検索入力にフォーカスがあるときにescキーを押すと、検索テキストがクリアされます (設定可能)。

重要: SearchInputコンポーネントは各ページに1 回だけ含めることをお勧めします。
複数のSearchInputコンポーネントが存在する場合、 /キーを押すと、表示されている最初のコンポーネントが優先してフォーカスされます。

例を使ったデモ

https://vue-search-input.vercel.app

インストール

npm i vue-search-input

使用法

 < template >
  < SearchInput v-model =" searchVal " />
</ template >

< script >
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
// Optionally import default styling
import 'vue-search-input/dist/styles.css'

const searchVal = ref ( '' )

export default {
  components : {
    SearchInput
  } ,
  setup ( ) {
    return {
      searchVal
    }
  }
}
</ script > 

スタイリング

vue-search-inputは、独自の CSS を作成するためのベースとして使用できるデフォルトのスタイル設定 ( dist/styles.css ) が含まれています。すべてのコンポーネントの要素は、アイコンと入力のラッパーとして機能するdiv内にあります。ラッパーdivのデフォルト クラスはsearch-input-wrapperですが、 SearchInputコンポーネントにクラスを提供することでオーバーライドできます。

SearchInputコンポーネントにバインドされたクラスとスタイルは、ラッパーdivに追加されます。

イベント

SearchInputコンポーネントにバインドされたイベントは、 input要素に渡されます。

名前	説明	戻り値
更新:モデル値	更新されたバインドされたモデル	string

小道具

名前	タイプ	説明	デフォルト
タイプ	弦	入力フィールドのタイプ。許可されるタイプはsearchとtextです	search
モデル値 (v-モデル)	弦	入力の値	''
ラッパークラス	弦	ラッパー div のデフォルトの CSS クラス	search-input-wrapper
検索アイコン	ブール値	「検索」アイコンを表示します	真実
ショートカットアイコン	ブール値	「ショートカット」アイコンを表示します	真実
クリアアイコン	ブール値	「クリアテキスト」アイコンを表示します	真実
ショートカットアイコンオンブラーを隠す	ブール値	入力がフォーカスを失ったときにショートカット アイコンを非表示にするかどうか	真実
ClearOnEsc	ブール値	escキーを押したときに入力フィールドをクリアするかどうか	真実
ブラーオンEsc	ブール値	escキーが押されたときに入力フィールドからフォーカスを外すかどうか	真実
選択オンフォーカス	ブール値	/キーを押すと入力のテキストを選択します	真実
ショートカットリスナー有効	ブール値	/キープレスの機能を有効にします	真実
ショートカットキー	弦	ショートカット機能のkey	/

スロット

vue-search-inputデフォルトのアイコンがいくつか含まれていますが、利用可能なslotsを使用してニーズに合わせてカスタマイズすることもできます。

名前	説明	デフォルトのコンテンツ
検索アイコン	検索アイコンのスロット	<i class="search-icon search"></i>
ショートカットアイコン	ショートカットアイコン用のスロット	<i class="search-icon shortcut" title='Press "/" to search'></i>
クリアアイコン	クリアアイコン用のスロット { clear: () => void }入力をクリアする関数	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
追加する	入力ラッパー内の検索アイコンの前に項目を追加します。	-
追加内部	入力ラッパー内の検索アイコンの後に項目を追加します。	-
先頭に追加する	入力ラッパー内の入力要素の直後に項目を追加します。	-
外側に追加	入力ラッパー内のクリアアイコンの直後に項目を追加します。	-