Vue.jsでFontAwesomePickerを実装する「vfa-picker」

vfa-pickerとは

vfa-pickerは、Vue.jsを使ってFontAwesomeのClass nameを取得できるPickerコンポーネントライブラリです。

【動画サイズ：233KB】

環境

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vfa-picker

yarn

yarn add vfa-picker

CDN

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vfa-picker.umd.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/zolamk/vue-fontawesome-picker

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import VueFontAwesomePicker from "vfa-picker";

（2）UMDの場合

const VueFontAwesomePicker = window['vfa-picker'].default;

2.メソッドを設定

上記で取得したVueFontAwesomePickerを Vue.use に取り込みます。

Vue.use(VueFontAwesomePicker);
new Vue({
  el: '#app', 
  data: {
    v: undefined
  }
});
 

3. テンプレートを準備

<vfa-picker> を設置する。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <vfa-picker v-model="v">
    <template v-slot:activator="{ on }">
      <input v-model="v" @click="on" placeholder="Icon Class" type="text" />
    </template>
  </vfa-picker>
</div>

サンプル

>>専用ページで確認する

さいごに

Vue.jsを使ってFontAwesomeのClass nameを取得できるPickerコンポーネントライブラリでした。

今日はこの辺でー