目次
vue-selectとは
vue-selectは、HTML <select>
要素でできることすべて、軽量で依存性のない、拡張可能なセレクトボックスコンポーネントライブラリです。
シングル/マルチオプションやタグ付け、フィルタリング/検索などの機能を備えています。
Githubのスターが2000を超える人気ライブラリです。
【動画サイズ:273KB】
環境
この記事は、以下の管理人の検証環境にて記事にしています。
vue.js | 2.6.10 |
vue-select | 3.1.0 |
ライブラリの取得
ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。
npm
npm install vue-select
yarn
yarn add vue-select
CDN
<script src="https://unpkg.com/[email protected]"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-select.css">
gitリポジトリは以下から取得できます。
導入手順
管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、検索機能付きのセレクトボックスを実装します。
step
1ライブラリの呼び出し
ES6等で実装する場合
import Vue from 'vue' import vSelect from 'vue-select' import 'vue-select/dist/vue-select.css';
UMDで実装する場合(CDNを使用する場合)
const vSelect = VueSelect.VueSelect;
step
2Vueインスタンスを設定
上記で取得した vSelectを
Vue.component
に取り込みます。
Vue.component('v-select', vSelect); new Vue({ el: '#app', data: { selected: '', options: [ 'foo', 'bar', 'baz' ] } })
step
3テンプレートを準備
<v-select>コンポーネントを設置します。
コンポーネントにv-modelを設定するとセレクトボックスので値を取得することができます。
サンプルはケバブケースで記載しています。
<div id="app"> <v-select name="hoge" :options="options" v-model="selected"></v-select> </div>
デモ
セレクトボックスの表示文字と値を別にする
通常のセレクトボックス同様に表示している文字と渡されるデータを別にすることができます。
セレクトボックスに渡したい値をオブジェクト形式にします。
表示用の値をlabel、データとして渡したい値をcodeに設定します。
new Vue({ el: '#app', data: { selected: '', options: [ {label: '中国語', code: 'ch'}, {label: '日本語', code: 'ja'}, {label: '英語', code: 'en'}, {label: '韓国語', code: 'kr'}, ] } })
複数選択
<v-select>
コンポーネントにmultiple を設定することで複数を選択できるようになります。
<v-select :options="options" multiple></v-select>
選択数を制限する
複数選択を可能にした時に、選択できる個数を制限することができます。
selectableを<v-select>
コンポーネントに設定します。
値にはfunction形式で指定する必要があります。
<v-select :options="options" v-model="selected" :selectable="function(){return selected.length < 3}" multiple ></v-select>
タグ
<v-select>
コンポーネントにtaggableを設定することで、入力した値をタグとして設定することができます。
<v-select :options="options" v-model="selected" multiple taggable></v-select>
まとめ
記事を書きながら色々テストしていましたが、このライブラリは便利過ぎてヤバイです。
使用用途が有りすぎて業務で使うのが楽しみになってきました。
興味がありましたら、ぜひ試してみてください。