vue multiselect

Vue-Multiselect

バージョン3のドキュメント

V3.0.0のドキュメントは、V2.xの場合とほとんど同じです。 V3および以前のバージョンの完全なドキュメントについては、Vue-Multiselect.js.orgをご覧ください。

機能と特性：

• 依存関係はありません

• シングルセレクト

• 複数の選択

• タグ付け

• ドロップダウン

• フィルタリング

• 提案で検索します

• ロジックはミックスインに分かれています

• カスタムコンポーネントの基本コンポーネントとサポート

• Vモデルサポート

• Vuexサポート

• 非同期オプションサポート

• 完全に構成可能（以下の小道具リストを参照）

インストールと基本的な使用法

NPMインストールvue-multiselect@next

 <テンプレート>
  <div>
    <vuemultiselect v-model = "selected"：options = "options">
    </vuemultiselect>
  </div>
</template> <scrip> 'vue-multiselect'export default {components：{vuemultiselect}、data（）{return {selected：null、options：[' list '、' of '、' options ']} {selected：selected：[' list '、' opterse ']}からVuemultiselectをインポートするインポート}} </script> <style src = "vue-multiselect/dist/vue-multiselect.css"> </style>

jsfiddle

例JSFiddle - これを使用して問題の複製を使用します。

例

シングルセレクト /ドロップダウン

<vuemultiselect
  ：model-value = "value"
  ：options = "source"
  ：searchable = "false"
  ：close-on-select = "false"
  ：Allow-empty = "false"
  @update：model-value = "updateSelected"
  label = "name"
  PlaceHolder = "1つを選択"
  track-by = "name"/>

検索付きシングルセレクト

<vuemultiselect
  v-model = "value"
  ：options = "source"
  ：close-on-select = "true"
  ：clear-on-select = "false"
  PlaceHolder = "1つを選択"
  label = "name"
  track-by = "name"/>

検索付きの複数の選択

<vuemultiselect
  v-model = "multivalue"
  ：options = "source"
  ：multiple = "true"
  ：close-on-select = "true"
  PlaceHolder = "選ぶ"
  label = "name"
  track-by = "name"/>

タグ付け

@tagイベント付き

<vuemultiselect
  v-model = "taggingselected"
  ：options = "taggingoptions"
  ：multiple = "true"
  ：taggable = "true"
  @tag = "addtag"
  tag-placeholder = "これを新しいタグとして追加"
  PlaceHolder = "タグを検索または追加するためのタイプ"
  label = "name"
  track-by = "code"/>

 addtag（newtag）{
  const tag = {name：newtag、code：newtag.substring（0、2） + math.floor（（math.random（） * 10000000））
  }
  this.taggingoptions.push（tag）
  this.taggingselected.push（tag）}、

非同期ドロップダウン

<vuemultiselect
  v-model = "SelectedCountries"
  ：options = "国"
  ：倍数= "倍数"
  ：検索可能= "検索可能"
  @search-change = "asyncfind"
  PlaceHolder = "検索するタイプ"
  label = "name"
  track-by = "code">
  <テンプレート#noresult>
    おっと！要素は見つかりません。検索クエリの変更を検討してください。
  </テンプレート>
</vuemultiselect>

方法：{
  asyncfind（query）{this.countres = findservice（query）
  }}

特別なありがとう

このバージョンを貢献してくれたMatt Elenに感謝します！

@ShentaoのVue-MulitselectコンポーネントのVue 3アップグレード。アイデアは、VUE 3にアップグレードすると、2つのコンポーネントを交換できるため、すべてが機能するはずです。 suade.orgのブログで、製品をVue 3にアップグレードした方法のストーリーを自由にチェックしてください

貢献

＃minificationnpm runバンドルを使用した配信ビルド＃run unit testsnpm実行テスト