vue2实现9宫格抽奖

实现9宫格抽奖，可以使用Vue.js框架的component组件进行实现。具体步骤如下：

1. 创建一个九宫格的组件，可以通过table标签和tr、td标签组合实现：

<template>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</template>

2. 在组件中定义数据，用于控制九宫格指针的指向，以及奖品的位置：

<script>
export default {
  data() {
    return {
      pointer: 0, // 指针位置
      prizeIndex: 4, // 奖品位置
      rotating: false // 是否正在旋转
    };
  }
};
</script>

3. 在组件中定义方法，用于处理抽奖逻辑，例如开始抽奖、停止抽奖等：

<script>
export default {
  data() {
    return {
      pointer: 0, // 指针位置
      prizeIndex: 4, // 奖品位置
      rotating: false // 是否正在旋转
    };
  },
  methods: {
    start() {
      if (this.rotating) return;
      this.rotating = true;
      let interval = setInterval(() => {
        this.pointer = (this.pointer + 1) % 9;
      }, 100);
      setTimeout(() => {
        clearInterval(interval);
        this.rotating = false;
        if (this.pointer === this.prizeIndex) {
          alert("恭喜您中奖了！");
        } else {
          alert("很遗憾，您没有中奖！");
        }
      }, 3000);
    }
  }
};
</script>

4. 在组件中添加样式，用于实现九宫格的样式，以及指针的指向：

<style scoped>
table {
  width: 200px;
  height: 200px;
  border-collapse: collapse;
}
td {
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
}
.active {
  background-color: orange;
}
.pointer {
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 20px 10px;
  }
  &::before {
    top: -20px;
    border-color: transparent transparent orange transparent;
  }
  &::after {
    bottom: -20px;
    border-color: orange transparent transparent transparent;
  }
}
</style>

5. 在组件中添加指针的样式类，并根据指针位置动态添加该样式类：

<template>
  <table>
    <tr>
      <td :class="{ active: pointer === 0 }">1</td>
      <td :class="{ active: pointer === 1 }">2</td>
      <td :class="{ active: pointer === 2 }">3</td>
    </tr>
    <tr>
      <td :class="{ active: pointer === 7 }">4</td>
      <td :class="{ active: pointer === 8 }">5</td>
      <td :class="{ active: pointer === 3 }">6</td>
    </tr>
    <tr>
      <td :class="{ active: pointer === 6 }">7</td>
      <td :class="{ active: pointer === 5 }">8</td>
      <td :class="{ active: pointer === 4 }">9</td>
    </tr>
  </table>
</template>

6. 在组件中添加开始抽奖按钮，以及绑定开始抽奖方法：

<template>
  <div>
    <table>
      ...
    </table>
    <button @click="start">开始抽奖</button>
  </div>
</template>

完整代码如下：

<template>
  <div>
    <table>
      <tr>
        <td :class="{ active: pointer === 0 }">1</td>
        <td :class="{ active: pointer === 1 }">2</td>
        <td :class="{ active: pointer === 2 }">3</td>
      </tr>
      <tr>
        <td :class="{ active: pointer === 7 }">4</td>
        <td :class="{ active: pointer === 8 }">5</td>
        <td :class="{ active: pointer === 3 }">6</td>
      </tr>
      <tr>
        <td :class="{ active: pointer === 6 }">7</td>
        <td :class="{ active: pointer === 5 }">8</td>
        <td :class="{ active: pointer === 4 }">9</td>
      </tr>
    </table>
    <button @click="start">开始抽奖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pointer: 0, // 指针位置
      prizeIndex: 4, // 奖品位置
      rotating: false // 是否正在旋转
    };
  },
  methods: {
    start() {
      if (this.rotating) return;
      this.rotating = true;
      let interval = setInterval(() => {
        this.pointer = (this.pointer + 1) % 9;
      }, 100);
      setTimeout(() => {
        clearInterval(interval);
        this.rotating = false;
        if (this.pointer === this.prizeIndex) {
          alert("恭喜您中奖了！");
        } else {
          alert("很遗憾，您没有中奖！");
        }
      }, 3000);
    }
  }
};
</script>

<style scoped>
table {
  width: 200px;
  height: 200px;
  border-collapse: collapse;
}
td {
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
}
.active {
  background-color: orange;
}
.pointer {
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 20px 10px;
  }
  &::before {
    top: -20px;
    border-color: transparent transparent orange transparent;
  }
  &::after {
    bottom: -20px;
    border-color: orange transparent transparent transparent;
  }
}
</style>