目次
vue-loading-checkboxとは
vue-loading-checkboxは、チェックボックスの値が切り替わる時に、ローディングアニメーションを実行するコンポーネントライブラリです。
【動画サイズ:35KB】
環境
この記事は、以下の管理人の検証環境にて記事にしています。
vue.js | 2.6.10 |
vue-loading-checkbox | 0.2.0 |
ライブラリの取得
ライブラリを取得するには、npm, CDNのどれか一つを使用します。
npm
npm install vue-loading-checkbox --save
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/LoadingCheckbox.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/LoadingCheckbox.css">
gitリポジトリは以下から取得できます。
導入手順
管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、チェックボックスの値が切り替わる時に、ローディングアニメーションを実行するコンポーネントを実装します。
step
1ライブラリの呼び出し
まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。
ES6等で実装する場合
import LoadingCheckbox from 'vue-loading-checkbox' import 'vue-loading-checkbox/dist/LoadingCheckbox.css'
UMDで実装する場合
const LoadingCheckbox = window['LoadingCheckbox']
step
2メソッドを設定
上記で取得した LoadingCheckboxを componentsに取り込みます。
new Vue({ el: '#app', components: { LoadingCheckbox }, data: { checked: false, loading: false }, methods: { toggleStatus: function() { this.loading = true; let self = this; setTimeout(function() { self.loading = false self.checked = !self.checked }, 2000) } } });
step
3テンプレートを準備
<loading-checkbox>
を配置します。
:checked
にチェックされているかをBoolで設定します。
サンプルはケバブケースで記載しています。
<div id="app"> <loading-checkbox :checked="checked" :loading="loading" label="チェックボックス" @click.native="toggleStatus" ></loading-checkbox> </div>
サンプル
今回のソースを実際に触って確認できるようにデモを用意しました。
See the Pen Vue.jsでローディング付きのチェックボックスを実装する「vue-loading-checkbox」 by カバの樹 (@kabanoki) on CodePen.dark
さいごに
チェックボックスの値が切り替わる時に、ローディングアニメーションを実行するコンポーネントライブラリでした。
今日はこの辺でー