概要
Vue-multiselectはセレクトボックスを簡単に実装できる便利なVueライブラリです。
複数選択や自動補完など一般的にセレクトボックスに求められる機能はほぼ全て実現できます。
ここでは公式サイトを元にVue-multiselectのカスタマイズ方法の一部を紹介します。
基本の使い方
上図のようにシンプルな単一選択のセレクトボックスは以下のコードで実装できます。
なおCDNを利用するとVue-multiselectを簡単に試せます。
See the Pen RwGwBaO by shi-ma (@shi-ma) on CodePen.
optionsプロパティには選択肢に設定したい配列を指定します。
custom-labelプロパティに関数を指定すると、その返り値が選択肢として表示されるラベルとなります。
optionsが連想配列で各キーのバリューを組み合わせたラベルを作りたい時などは非常に便利です。
一つのキーのバリューのみをラベルとして表示したいときは、代わりにlabelプロパティを使いlabel=countryというような書き方ができます。
custom-labelやlabelは必須プロパティではありませんが、optionsが単なる配列でなく、連想配列の場合は設定しないと要素がそのまま表示されてしまいます。
Events
Vue-multiselectにはイベントプロパティが用意されており、ユーザーの操作をトリガーにして関数を実行することが可能です。
イベントプロパティ一覧
| プロパティ名 | トリガー |
|---|---|
@input |
this.valueの値が変わる |
@select |
選択肢を選ぶ |
@remove |
複数選択の時に選択を取り消す |
@search-change |
検索クエリが変更される |
@tag |
タグが追加される |
@open |
ドロップダウンが開かれる |
@close |
ドロップダウンが閉じられる |
@removeの利用例
See the Pen Untitled2 by shi-ma (@shi-ma) on CodePen.
例えば複数選択をオン（multiple="true"）にして@removeプロパティを上記のように設定すると、選択を取り消した時にアラートが表示されます。
自動補完
Vue-multiselectはデフォルトで自動補完機能がオンになっており、オフにしたい時はsearchableプロパティをfalseにします。
この自動補完はlabelプロパティの値（custom-labelプロパティを指定していればその値）を元に候補を絞っています。
もし独自の検索条件を設定したい場合はカスタマイズできます。
カスタマイズ例
See the Pen VwKwBMN by shi-ma (@shi-ma) on CodePen.
internal-searchプロパティをfalseにするとVue-multiselectの内部検索エンジンがオフになり、optionsを自由に設定できるようになります。
@search-changeに指定した関数は検索クエリに変更がある度に実行され、さらに関数の第一引数には検索クエリが入ります。これを利用し、optionsをフィルタリングするような関数を書けば、検索クエリが変わる度にoptionsが更新されるようになり、自動補完機能を代替できます。
終わりに
Vue-multiselectは用途に合わせてカスタマイズできる余地が大きいライブラリです。
ここでは現時点で日本語での説明が比較的少ない機能を紹介しましたが、Vue-multiselectには面白いカスタマイズ方法がまだまだあります。
Vueでセレクトボックスを実装するときはぜひVue-multiselectをお試しください。