vue 随机号码快速跳动

vue 随机号码快速跳动
vue 组件, 常用于抽奖号码生成。当点击生成的时候，界面上会随机快速跳动号码，停止时获取号码。

<template>
  <div class="about">
    <input v-model="val" />
    <button @click="getVal">{{ loading ? `停止` : `生成` }}</button>
  </div>
</template>
<script>
/*
 ** randomWord 产生任意长度随机字母数字组合
 ** randomFlag-是否任意长度 min-任意长度最小位[固定位数] max-任意长度最大位
 ** xuanfeng 2014-08-28
 */
function randomWord(randomFlag, min, max) {
  var str = "",
    range = min,
    arr = [
      "0",
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "a",
      "b",
      "c",
      "d",
      "e",
      "f",
      "g",
      "h",
      "i",
      "j",
      "k",
      "l",
      "m",
      "n",
      "o",
      "p",
      "q",
      "r",
      "s",
      "t",
      "u",
      "v",
      "w",
      "x",
      "y",
      "z",
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "U",
      "V",
      "W",
      "X",
      "Y",
      "Z",
    ];
  // 随机产生
  if (randomFlag) {
    range = Math.round(Math.random() * (max - min)) + min;
  }
  for (var i = 0; i < range; i++) {
    let pos = Math.round(Math.random() * (arr.length - 1));
    str += arr[pos];
  }
  return str;
}

export default {
  data() {
    return {
      loading: undefined, // 生成器
      val: ``,
    };
  },
  methods: {
    getVal() {
      // 定时器存在时清除定时器
      if (this.loading) {
        this.loading = clearInterval(this.loading);
        this.val = `123456`; // 停止后实际要指定的值
      } else {
        this.loading = setInterval(() => {
          this.val = randomWord(true, 5, 5);
        }, 0);
      }
    },
  },
  computed: {},
  components: {},
};
</script>

​