目次
animated-number-vueとは
animated-number-vueは、数字をアニメーションにするコンポーネントライブラリです。
【動画サイズ:62KB】
環境
Vue | 2.6.10 |
animated-number-vue | 1.0.0 |
インストール
以下のnpm、yarn、UMDを使ってインストールします。
npm
npm install animated-number-vue
yarn
yarn add animated-number-vue
UMD
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/AnimatedNumber.umd.min.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/Leocardoso94/animated-number-vue
導入手順
1. ライブラリの取り込み
(1)ES6等の場合 [注意]モジュール版は未検証です。
import AnimatedNumber from "animated-number-vue";
(2)UMDの場合
const AnimatedNumber = window['AnimatedNumber'];
2.メソッドを設定
上記で取得したAnimatedNumberを components
に取り込みます。
new Vue({ el: '#app', components: { AnimatedNumber }, data: { value: 1000 }, methods: { formatToPrice:function(value) { return `¥ ${value.toFixed(2)}`; } } });
3. テンプレートを準備
<animated-number>
を設置する。
[注意] サンプルはケバブケースで記載しています。
<div id="app"> <animated-number :value="value" :format-value="formatToPrice" :duration="3000" ></animated-number> </div>
サンプル
さいごに
数字をアニメーションにするコンポーネントライブラリでした。
今日はこの辺でー