CountUp 数字滚动

基本用法

  1. <nut-countup :init-num='0' :end-num='200'></nut-countup>
  3. <nut-countup :init-num='150.00' :end-num='0.00' :speed='2.62' :to-fixed='2'></nut-countup>
  5. <nut-countup :init-num='1000.00' :end-num='0.00' :speed='6.3' :start-flag='startNum' :to-fixed='2'></nut-countup>

数字滚动

  1. <nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>

自定义数字图片展示

  1. <nut-countup
  2.     :custom-change-num="customNumber"
  3.     :custom-bg-img="bgImage"
  4.     :custom-spac-num="11"
  5.     :num-width="33"
  6.     :num-height="47"
  7.     :during="5000"
  8. >
  9. </nut-countup>
  1. export default {
  2.     data() {
  3.         return {
  4.             customNumber: 618, 
  5.             bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
  6.         };
  7.     },
  8.     methods: {
  9.         run() {
  10.             let timer = null;
  11.             timer = setInterval(() => {
  12.                 this.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
  13.             }, 5000);
  14.         }
  15.     },
  16.     mounted() {
  17.         this.run();
  18.     }
  19. };

抽奖

  1. <nut-countup
  2.     ref="countup-machine"
  3.     type="machine"
  4.     :machine-num="machineNum"
  5.     :machine-prize-num="5"
  6.     :machine-prize-level="prizeLevel"
  7.     :custom-bg-img="bgImage"
  8.     :num-width="100"
  9.     :num-height="100"
  10.     :during="3000"
  11.     @scroll-end="scrollAniEnd"
  12. >
  13. </nut-countup>
  14. <nut-button @click="startRole" :disabled="startFlag">抽奖</nut-button>
  1. export default {
  2.     data() {
  3.         return {
  4.             startFlag: false,
  5.             machineNum: 3,
  6.             bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
  7.             prizeLevel: 0
  8.         };
  9.     },
  10.     methods: {
  11.         startRole() {
  12.             this.prizeLevel = Math.floor(Math.random() * 5 + 1);
  13.             this.startFlag = true;
  14.             this.$refs['countup-machine'].machineLuck();
  15.         },
  16.         scrollAniEnd() {
  17.             this.$toast.text('恭喜中奖！！！');
  18.             setTimeout(() => {
  19.                 this.startFlag = false;
  20.             }, 300);
  21.         }
  22.     }
  23. };

Prop

字段说明类型默认值
init-num初始数字Number0
end-num结束数字Number0
speed间隔数字，目前仅支持基本用法Number1
to-fixed保留小数点后几位Number以传入的数字为准
start-flag触发数字滚动的标识Booleantrue
during滚动一次运行时间Number1000
num-width数字宽度，常用于自定义无缝滚动Number20
num-height数字高度，常用于自定义无缝滚动（抽奖功能必传）Number20
scrolling用于数字滚动展示Booleanfalse
custom用于自定义图片数字滚动Booleanfalse
custom-change-num要变化的数字（用于自定义图片,initNum\endNum在此无效）Number1
custom-bg-img自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图）--
custom-spac-num图片中数字之间可能会存在间距Number0
type使用抽奖功能必传“machine”string‘’
machine-prize-num奖品个数，一共多少个奖品，必传number4
machine-num抽奖位，即滚动几个，必传number3
machine-prize-level中奖图标，图标在雪碧图中的位置number0
machine-trun-more滚动圈数number0

说明：抽奖功能需要结合图标位置计算，故需传入雪碧图中单个图标的高度 num-height；中奖奖品根据雪碧图中的奖品位数来定位，从 1 到 N；

Event

字段说明回调参数
scroll-end滚动结束后回调函数-

CountUp 数字滚动 - 图1