vue2简单的前端实现抽奖

 <button @click="toggleLottery">{{ lotteryButton }}</button>
    <p v-if="prize">{{ prize }}</p>

<script>
export default {
  name: 'Home',
  data() {
    return {
      lotteryButton: '点击抽奖',
      prize: null,
      isLotteryRunning: false,
      prizes: ['一等奖', '二等奖', '三等奖', '谢谢参与']
    }
  },
  methods: {
    toggleLottery() {
      if (this.isLotteryRunning) {
        // 如果抽奖正在进行，则停止抽奖
        this.isLotteryRunning = false;
        this.lotteryButton = '点击抽奖';
      } else {
        // 如果抽奖未开始，则开始抽奖
        this.isLotteryRunning = true;
        this.lotteryButton = '正在抽奖请稍后';
        this.startLottery();
      }
    },
    startLottery() {
      // 使用 setInterval() 方法每隔一段时间随机选择一个奖品
      let index = 0;
      let interval = setInterval(() => {
        index = (index + 1) % this.prizes.length;
        this.prize = this.prizes[index];
      }, 100);

      // 如果抽奖已经停止，则不设置停止时间
      // 否则，随机设置停止时间
      let stopTime = this.isLotteryRunning ? (Math.floor(Math.random() * 5000) + 5000) : 0;
      setTimeout(() => {
        clearInterval(interval);
        this.isLotteryRunning = false;
        this.lotteryButton = '点击抽奖';
      }, stopTime);
    }
  }
}
</script>