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> ```