vue实现数字滚动抽奖,提供一个数组,从数组里面随机滚动抽取

好的，下面是一个从数组中随机滚动抽取数字的Vue数字滚动抽奖的实现示例：

1. 在template中定义一个数字滚动的容器：

<template>
  <div class="number-roller">
    <div class="number" v-bind:style="numberStyle">{{ number }}</div>
  </div>
</template>

2. 在data中定义数字滚动的数值和样式：

export default {
  data() {
    return {
      number: 0,
      numberStyle: {
        transform: 'translateY(0px)',
        transition: 'transform 0.3s ease-out'
      }
    }
  }
}

3. 在computed中计算数字滚动的样式和值：

computed: {
  numberStyle() {
    return {
      transform: `translateY(${-this.number * 30}px)`,
      transition: 'transform 0.3s ease-out'
    }
  }
}

这里假设数字是在0到9之间滚动，每个数字之间的间距为30像素。当数字改变时，计算属性会重新计算数字滚动的样式。

4. 在methods中添加一个"startRolling"方法，以触发数字滚动动画，并从数组中随机抽取中奖号码：

methods: {
  startRolling(items) {
    let count = 0;
    let interval = setInterval(() => {
      this.number = Math.floor(Math.random() * 10); // 随机生成一个数字
      count++;
      if (count > 10) { // 滚动10次后停止滚动
        clearInterval(interval);
        const index = Math.floor(Math.random() * items.length); // 从数组中随机抽取一个索引
        const number = items[index]; // 取出中奖号码
        this.$emit('rolling-complete', number); // 触发抽奖完成事件，传递中奖号码
      }
    }, 300);
  }
}

这里使用setInterval方法每隔0.3秒随机生成一个数字，滚动10次后停止滚动，并从传递的数组中随机抽取一个中奖号码，通过$emit方法触发抽奖完成事件，将中奖号码传递给父组件。

5. 在父组件中使用"NumberRoller"组件，并传递一个数组作为参数：

<template>
  <div>
    <button @click="startLottery">开始抽奖</button>
    <number-roller v-if="rolling" @rolling-complete="handleRollingComplete(items)"></number-roller>
  </div>
</template>

6. 在父组件中定义"startLottery"方法，以开始抽奖：

methods: {
  startLottery() {
    this.rolling = true;
  },
  handleRollingComplete(number) {
    this.rolling = false;
    alert(`恭喜您中奖了，中奖号码为${number}`);
  }
}

这里使用"rolling"变量控制数字滚动组件的显示和隐藏，当抽奖完成时，显示中奖号码的提示框。

这样就完成了一个从数组中随机滚动抽取数字的Vue数字滚动抽奖的实现。你可以根据实际需求进行更加丰富的自定义和优化。