nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN
    Have ideas to improve npm?Join in the discussion! »

    count-up-number

    0.0.4 • Public • Published

    count-up-number

    vue 数字滚动组件

    Usage

    1:安装

    npm install count-up-number --save
    or
    yarn add count-up-number
    

    2:引入

    在main.js中
    
    // 导入组件
    import countUp from 'count-up-number'
    import 'count-up-number/lib/countup.css'
    // 注册组件库
    Vue.use(countUp);
    

    3:使用

    <countUp />
    
    // 使用
    export default {
      data() {
        return {
          number: 1234.5, // 滚动数字
          symbol: ",", // 千位分隔符
          itemHeight: 20, // 数字高度
          scrollTime: 1000, // 滚动动画时间
          className: "my-class", // 自定义class
          initStatus: true, // 初始是否滚动
        };
      },
      mounted() {
        setTimeout(() => {
          this.number = 918746;
        }, 3000);
      },
    };
    
    // 自定义样式使用
    .my-class {
      width: 25px;
      margin-right: 10px;
    }
    .my-class .item {
      width: 25px;
      background: #f60;
      color: #fff;
    }
    

    API

    <countUp
    :number="123456"
    :symbol=","
    :scrollTime="1000"
    :className="my-class"
    :initStatus="true"
    :itemHeight="30" />
    

    number(必填)

    滚动数字 [Number]

    symbol

    千位分隔符 不显示(默认) [String]

    scrollTime

    数字滚动时间(默认 1000,毫秒) [Number]

    className

    自定义样式 class [String]

    initStatus

    初始化是否滚动(默认 true) [Boolean]

    itemHeight

    数字滚动高度(默认 20px) [Boolean]

    Install

    npm i count-up-number

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar