Open4

VueのSelectライブラリ比較

腹筋ローラーの力を信じろ腹筋ローラーの力を信じろ

vue-multiselect

https://vue-multiselect.js.org/

  • 依存なし
  • Vue 3.0サポート（ただし next ブランチ？）
  • value に object をサポート

スタイルのカスタム

  • 特に言及がない。override祭りか

パフォーマンス

  • 現在作っているものが、非常に重いデータを扱うために、非同期サポートは必須
  • 表示件数の制限を実装可能か
    • 大丈夫そう、afterList slotでメッセージを出せるっぽい

言語

  • selectLabel propsなどで細かく指定できるらしい

表示のカスタマイズ

  <multiselect v-model="value" placeholder="Fav No Man’s Sky path" label="title" track-by="title" :options="options" :option-height="104" :custom-label="customLabel" :show-labels="false">
    <template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span></template>
    <template slot="option" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky">
      <div class="option__desc"><span class="option__title">{{ props.option.title }}</span><span class="option__small">{{ props.option.desc }}</span></div>
    </template>
  </multiselect>

本体、オプションともに対応していそう

VeeValidateとの連携

  • 大丈夫な気がするが、検証の必要がある

apendToBody

腹筋ローラーの力を信じろ腹筋ローラーの力を信じろ

vue-select

https://vue-select.org/

  • 依存なし

スタイルのカスタム

https://vue-select.org/guide/css.html#dark-mode-example

  • CSS Variablesでのカスタムをサポート、いいね
  • ドキュメントも整備されている

表示のカスタマイズ

option:

<v-select :options="options" label="title">
  <template v-slot:option="option">
    <span :class="option.icon"></span>
    {{ option.title }}
  </template>
</v-select>

選択済みのオプション:

<template>
  <!-- eslint-disable vue/no-unused-vars  -->
  <v-select :options="books" label="title">
    <template
      #selected-option-container="{ option, deselect, multiple, disabled }"
    >
      <div class="vs__selected">{{ option.title }}</div>
    </template>
  </v-select>
</template>

言語

パフォーマンスチューニング

VeeValidateとの連携

https://codesandbox.io/s/veevalidate-with-vueselect-13g9d

いけそう

apendToBody

  • デフォルトで対応している
  • なんならカスタマイズも可能