Nutrias Punching Marmots

    vue-number-counter

    1.0.5 • Public • Published

    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

    Install

    npm i vue-number-counter

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    29.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • hz-ljq