826327700 / count-flip

Number flip animation for vue.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

count-flip

适用于vue的数字滚动动画插件。 Number flip animation for vue.

install(安装)

yarn add count-flip
or
npm install count-flip

import(引入)

import CountFlip from 'count-flip'

Vue.use(CountFlip)

use(使用)

<div class="row">
  <span>带小数点:</span><CountFlip :number="5201314"></CountFlip>
</div>
<div class="row">
  <span>不带小数点:</span><CountFlip :number="5201314" :comma="false"></CountFlip>
</div>
<div class="row">
  <span>自定义字号:</span><CountFlip :number="5201314" :size="50"></CountFlip>
</div>
<div class="row">
  <span>自定义颜色:</span><CountFlip :number="5201314" color="#ff6600"></CountFlip>
</div>
<div class="row">
  <span>动态切换数值:</span><CountFlip :number="number" color="#ff6600"></CountFlip>
  <button @click="change">切换数字</button>
</div>

props(参数)

prop type default describe
number Number 0 The number should be showed
comma Boolean true If need currency format or not,like 123,456
size Number 24 The size of font
color String #000 The color of font

screenshot(截图)

About

Number flip animation for vue.


Languages

Language:Vue 71.7%Language:JavaScript 14.4%Language:HTML 13.9%