Vue组件实现数字滚动抽奖效果

以下我是根据该作者做的一点点得修改

https://www.jb51.net/article/240059.htm

<template>
  <div class="info-span04" style="color: #333333;">
  <p @click="begin" style="cursor:pointer;padding:10px;border:1px solid red;display:inline-block;margin-right:10px">开始</p>
  <p @click="stop" style="cursor:pointer;padding:10px;border:1px solid red;display:inline-block;margin-right:10px">结束</p>
  <br>
    中奖号码：
    <div style="vertical-align: middle;display: inline-block;">
      <div class="openNumber" v-for="(item, index) in awardCode" :key="index">
        <div class="num mui-text-center">
          <div class="span value">
            <transition name="down-up-translate-fade">
              <div :key="item.value">{{item.value}}</div>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'sign-in_lucky-draw',
  data () {
    return {
      interval_one: null,
      interval_two: null,
      interval_three: null,
      interval_four: null,
      awardCode: [
        {name: 'oneDigit', value: '?'},
        {name: 'twoDigit', value: '?'},
        {name: 'threeDigit', value: '?'},
        {name: 'fourDigit', value: '?'}
      ],
    }
  },
  // 开奖效果方法
  methods: {
    begin () {
      this.start(0, 0, 'interval_one')
      this.start(3, 1, 'interval_two')
      this.start(6, 2, 'interval_three')
      this.start(8, 3, 'interval_four')
    },
    stop () {
      this.end(3, 0, 'interval_one')
      this.end(5, 1, 'interval_two')
      this.end(1, 2, 'interval_three')
      this.end(1, 3, 'interval_four')
    },
    start(startN, index, interval) {
      var _this = this;
      if (!this[interval]) {
        let i = startN
        this[interval] = setInterval(function() {
          _this.awardCode[index].value = ++i <= 9 ? i : (i=-1,++i)
        }, 100)
      }
    },
    end(resultNum, index, interval) {
      this.awardCode[index].value = resultNum;
      this.show = !this.show
      clearInterval(this[interval])
      this[interval] = null
    },
    prizeNumber(code) {
      this.awardCode[0].value = code.substr(0,1)
      this.awardCode[1].value = code.substr(1,1)
      this.awardCode[2].value = code.substr(2,1)
      this.awardCode[3].value = code.substr(3,1)
    },
  },
  beforeDestroy: function() {
    if(this.interval_one){
      clearInterval(this.interval_one)
    }
    if(this.interval_two){
      clearInterval(this.interval_two)
    }
    if(this.interval_three){
      clearInterval(this.interval_three)
    }
    if(this.interval_four){
      clearInterval(this.interval_four)
    }
  }
}
</script>
<style scoped>
.openNumber {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding-right: 20px;
}
.num {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.num .span {
  color: #fff;
  width: 30px;
  height: 30px;
  font-weight: bold;
  float: left;
}
.num .span .span div {
  text-align: center;
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
  transition: all .1s;
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  -o-transition: all .1s;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
  opacity: 1;
}
.down-up-translate-fade-leave-active {
  transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -o-transform: translateY(-50px);
}
.value {
  background: url('../../lib/img/guoqing.png') no-repeat top center;
  background-size: 100% 100%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 22px;
  font-weight: bold;
}
</style>