目次
v-odometerとは
v-odometerは、数値をスムーズに移行するためにアニメーションを付けられるコンポーネントライブラリです。
あらかじめ用意された7種類のテーマを使用することができます。
環境
Vue | 2.6.10 |
v-odometer | 2.0.1 |
インストール
以下のnpm、CDNを使ってインストールします。
npm
npm install v-odometer
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/main.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/main.prod.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/JefferyHus/v-odometer
導入手順
1. ライブラリの取り込み
(1)webpack等の場合 [注意]モジュール版は未検証です。
import VueOdometer from 'v-odometer/src' Vue.component('vue-odometer', VueOdometer);
(2)WEBページの場合
なし
2.メソッドを設定
サンプル用にクリックした時に数字をランダムで変更するupdateNumberメソッドを用意します。
new Vue({ el: '#app', data: { mynumber: 0 }, methods: { updateNumber: function () { this.mynumber = Math.floor(Math.random() * (9999 - 1)) + 1 console.log(this.mynumber) } }, });
3. テンプレートを準備
<vue-odometer>
を設置します。
コンポーネントの値を value
プロパティ、テーマは theme
プロパティの設定、アニメーションを animation
プロパティに設定します。
[注意] サンプルはケバブケースで記載しています。
<div id="app"> <vue-odometer :value="mynumber" animation="smooth" theme="digital" class="odometer"></vue-odometer> <button class="btn btn-info" @click="updateNumber()">Update</button> </div>
サンプル
さいごに
数値をスムーズに移行するためにアニメーションを付けられるコンポーネントライブラリでした。
今日はこの辺でー