[jsライブラリ]Vue Selectの使い方を試す。

おしゃれなセレクトボックスが使えるプラグインがあったので試してみる。

１．vue-selectって何だ？

その名の通りだけど、vue.jsで使えるセレクトボックス拡張のプラグインです。

本家はこちら。　GitHub - sagalbot/vue-select

軽くドキュメント見ると、めちゃ多機能っぽい。

さっそく機能を試してみましょ。

２．導入方法

CDNがるので、これですぐ試せる。（vue.js + vue-select）

<!-- include VueJS first -->
<script src="https://unpkg.com/vue@latest"></script>

<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

ほんで、ライブラリの引き込みが完了したら

Javascript側でこの記述を最初に入れて、'v-select'って名前のコンポーネント定義を読み込みます。

Vue.component('v-select', VueSelect.VueSelect);

ここまでは定型文だからコピペでおっけー。

これで準備は整ったのでさっそく試していきましょー

３．実装方法

当然、Vueのコンポーネントとして読みこんだのでVueオブジェクトの中で使っていくよー

まずは、素材の味から楽しみましょう。一番簡単な実装から。

<div id='sample1'>
  <v-select :options="fruits" v-model="selected"></v-select>
  <p>{{ selected }}</p>
</div>

<script type="text/javascript">
<!--
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
  data: {fruits:['りんご', 'ばなな', 'いちご', 'キウイ', 'メロン', 'ブドウ'],
         selected:''}
});
-->
</script>

Vueの中でコンポーネント v-selectを定義して、:options属性でリスト渡せば選択リストになってselectedをv-modelバインディングしとけば選択値が取れるよと。

（微妙にページテーマのスタイルと競合してなんかレイアウト崩れるなぁ・・・?）

複数選択に対応させてみる。

multiple属性を追加するだけで複数選択に対応した感じに仕上がる。なんかイマドキ。

<v-select multiple :options="fruits" v-model="selected"></v-select>

取得値は配列になって入ってくる。

タグ付け（自由入力許可）

taggable属性を付けるとプルダウン選択だけじゃなくてフリー入力された文字列をタグ付けして選択値にできる。

<v-select taggable multiple :options="fruits" v-model="selected"></v-select>

push-tags属性で、そのフリー入力値をさらにプルダウン選択リストに追加できるってなってるけど、どゆとき使うのかな?

イベント発生を拾う。

イベントトリガ管理は、バージョンごとに結構変更かかってるみたい。

開発当初までは、onChange・onInput・onSearchが使えてたみたいだけど、v2から削除されて@change・@inputっていう属性が使えるようになったけど、それがv3で@inputに統合されてるみたい?

一応、このデモは2019/11/30時点の情報と思ってください?

このページのCDNは最新バージョン引き込む様にしてるので、動かなくなったら追加調査しまーす。

<div id='sample4'>  
  <v-select @input="changeEvt" :options="fruits" v-model="selected"></v-select>
  <p>{{ selected }}</p>
</div>

<script type="text/javascript">
<!--
new Vue({
  el: "#sample4",
  data: {fruits:['りんご', 'ばなな', 'いちご', 'キウイ', 'メロン', 'ブドウ'],
         selected:''},
  methods: {
    changeEvt: function(e) { alert('Changeイベントが発生したよ?'); }
  }
});
-->
</script>

リストのカスタマイズ

カスタマイズも、v-slotテンプレート使うと簡単にできちゃうのだ。

<div id='sample5'>
  <v-select :options="options" label="title">
    <template v-slot:option="option">
      <i :class="option.icon"></i>{{ option.title }}
    </template>
  </v-select>
</div>

<script type="text/javascript">
<!--
new Vue({
  el: "#sample5",
  data: {options:[{title:'見てるよ。', icon:'icono-eye'},
           {title:'ずんちゃか♪', icon:'icono-headphone'},
           {title:'共有', icon:'icono-share'},
           {title:'カートに入れる', icon:'icono-cart'}],
         selected:''}
});
-->
</script>