⚙️

VueでiOSの設定画面みたいなtoggleボタンをかんたんに作る

2021/02/06に公開

Vue.js

npm

tech

Vue.jsもjQueryのようにライブラリが充実してきました。
今回つくるtoggleボタンもライブラリを使用します。

やることは、npmでインストールして、インポートして、Vueファイルに書き込むだけ！
びっくりするほどあっという間です。

完成物

これを目指します。

実装

まずはインストール

npm install vue-js-toggle-button --save

プラグイン系はだいたい --save つける派です。

プロジェクトにインポート

// npmでインストールしたパッケージをインポート
// ToggleButtonという名前で使う
import ToggleButton from 'vue-js-toggle-button';

// インポートしたToggleButtonを使える状態に
Vue.use(ToggleButton);

今回、私はVue CLIで構築したプロジェクトで使用するので、
main.jsで読み込んでいます。

設置

お好きなところに。

<toggle-button></toggle-button>

これでひとまず見た目は実装できました。

チェックボックスのようにdataとバインディングする

見た目だけじゃなく、チェックボックスみたいにtrue、falseをバインディングしたいですよね。
やり方はチェックボックスと同じです。v-modelによってバインディングします。

<toggle-button v-model="toggle"></toggle-button>

今回は分かりやすいようにtoggleというデータを用意して、それとバインディングしています。
（プロジェクトに合わせて適切なデータ名を設定してくださいね！）

すると、チェックボックスのようにバインディングしていることが確認できます。
以下はdataの中身を、

<pre>
    {{ $data }}
</pre>

で分かりやすく表示しています。

便利なオプションは公式から

他にも色、トグルのスピード、表示する文字などをオプションで変更できます。
ここでは紹介しきれないので、公式からどうぞ！