Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-number-counter

hz-ljq15MIT1.0.5

A Vue.js project, (基于vue2的数字滚动（翻牌）插件)

vue2, counter, number, character, vue-counter, vue counter, number-counter, number counter, number-animate, number animate, number-animation, number animation, character-counter, character counter, character-animate, character animate, character-animation, character animation, vue-number, vue number, vue-number-counter, vue number counter, vue-character, vue character, vue-character-counter, vue character counter, numbers, characters, numbers-counter, numbers counter, numbers-animate, numbers animate, numbers-animation, numbers animation, characters-counter, characters counter, characters-animate, characters animate, characters-animation, characters animation, vue-numbers, vue numbers, vue-numbers-counter, vue numbers counter, vue-characters, vue characters, vue-characters-counter, vue characters counter

readme

vue-number-counter

基于vue2的数字滚动（翻牌）插件

特点1：传给插件的value类型，支持String和Number类型；
特点2：当传给插件的value是Number类型时，支持千位分隔符格式（用于金额、标价等），支持自定义小数位数；
特点3：支持自定义字符表，支持每个字符在激活状态下的样式控制；

Demo演示:

avatar

NPM

npm install vue-number-counter --save

Mount

  • mount with global

    import Vue from 'vue'
// require styles
import 'vue-number-counter/dist/vue-number-counter.css'
import VueNumberCounter from 'vue-number-counter'
Vue.use(VueNumberCounter)

  • mount with component

    // require styles
import 'vue-number-counter/dist/vue-number-counter.css'
import { VueNumberCounter } from 'vue-number-counter'
export default {
components: {
  VueNumberCounter
}
}

Usage

<div class='my-wrapper'>
  <div class='my-title'>My Number: </div>

  <vue-number-counter class='my-number' :value="17842.7129" :option='myOption' />

</div>

Demo参考:

https://github.com/hz-ljq/vue-number-counter/blob/master/src/components/Demo.vue

Props

Name Type Default Description
:value String/Number "0" 要进行动画效果的数字或者字符串
:option Object duration: 2000,
characterWidth: 16,
addCharacter: [],
replaceCharacterMap: [],
decimals: 2,
thousandsSeparatorFlag: false		 配置项

:option（Detail explanation）

Name Type Default Description
duration Number 2000（单位：ms） 字符或数字滚动的动画过渡时间；
characterWidth Number 16（单位：px） 每个字符所占的宽度；
addCharacter Array [] 向默认的字符表里追加新的字符，必须是单字符数组，比如：['♪', '∮']；
replaceCharacterMap Array [] 替换默认的字符表；
decimals Number 2 四舍五入小数位数（只在:value参数是Number类型时，才有效）；
thousandsSeparatorFlag Boolean false 是否需要添加千位分隔符（只在:value参数是Number类型时，才有效）；

addCharacter属性和replaceCharacterMap属性，区别：

// 默认字符表；
characterMap: [',', '+', '-', '.', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
  • addCharacter：在默认的字符表基础上新增字符；
  • replaceCharacterMap：用新的字符表，替换默认的字符表；
  • 区别：后者可以控制字符表内字符的顺序；

通过.active-number类名，可以控制每个字符在激活状态下的样式，比如：

.active-number {
  color: white;
  text-shadow: 1px 1px red,2px 2px red;
}

效果如下：

avatar