vue select

vue-select

HTML の<select>要素で実行できるすべての機能が、軽量で依存関係のない、拡張可能な Vue コンポーネントにまとめられています。

Vue Select は、機能豊富な選択/ドロップダウン/先行入力コンポーネントです。フィルタリング可能な選択ドロップダウンのほとんどのユースケースに適合するデフォルトのテンプレートを提供します。このコンポーネントは、アクセシビリティ、開発者エクスペリエンス、およびカスタマイズに関して高い基準を維持しながら、可能な限り軽量になるように設計されています。

• タグ付け
• フィルタリング/検索
• Vuex のサポート
• AJAXのサポート
• SSRサポート
• アクセシビリティ対応
• 合計 ~20kb / CSS ~5kb / JS ~15kb
• 単一/複数のオプションを選択
• スロットとSCSS変数でカスタマイズ可能
• 依存関係ゼロ

ドキュメント

完全なドキュメントと例は https://vue-select.org で入手できます。

• APIドキュメント
• Vue 2 CodePen テンプレート
• Vue 3 CodePen テンプレート

スポンサー？

このプロジェクトを維持するには多大な努力が必要です。開発時間を節約できた場合は、GitHub スポンサーとのプロジェクトのスポンサーになることを検討してください。

Vue Select を可能にしてくれたスポンサーと貢献者の皆様に多大な感謝を申し上げます。

始めましょう

Vue 3 / Vue Select 4.x ベータ版

Vue 3 のサポートはbetaチャネルvue-select@betaで行われ、 v4がリリースされると新しいデフォルトになります。詳細については #1579 を参照してください。

インストール：

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

次に、コンポーネントをインポートして登録します。

# main . ts or main . js

import { createApp } from "vue" ;
import App from "./App.vue" ;

import { VueSelect } from "vue-select" ;

createApp ( App )
    . component ( "v-select" , VueSelect )
    . mount ( "#app" ) ;

コンポーネント自体には CSS は含まれません。これを Component.vue に個別に含める必要があります。

 < style >
@import " vue-select/dist/vue-select.css " ;
</ style >

Vue 2 / Vue Select 3.x

インストール：

yarn add vue-select

# or use npm

npm install vue-select

次に、コンポーネントをインポートして登録します。

 import Vue from "vue" ;
import vSelect from "vue-select" ;

Vue . component ( "v-select" , vSelect ) ;

コンポーネント自体には CSS は含まれません。別途含める必要があります。

 import "vue-select/dist/vue-select.css" ;

vue-select をブラウザーに直接組み込むこともできます。 CDN からのロードに関するドキュメントを確認してください。

ライセンス

マサチューセッツ工科大学