前端实现转盘抽奖 - 使用 lucky-canvas 插件

目录

• 需求背景
• 需求实现
• • 实现过程图片示意
  • 实现代码
  • 页面效果
  • lucky-canvas ���件官方文档

    需求背景

    要求实现转盘转动抽奖的功能：

    1. 只有正确率大于等于 80% 才可以进行抽奖；
    2. “谢谢参与”概率为 90%，“恭喜中奖”概率为 10%；

    需求实现

    实现过程图片示意

    实现代码

    安装插件

    npm install @lucky-canvas/vue@latest

    main.js 全局引入组件

    import VueLuckyCanvas from '@lucky-canvas/vue'Vue.use(VueLuckyCanvas)

    实现代码

                                              正确率{{ (correct / total).toFixed(1) * 100 }}%                                              试卷分析                              题目总量:          {{ total }}          题                                      正确题数:          {{ correct }}          题                          错误题数:          {{ total - correct }}                    题                      恭喜您获得抽奖资格 点击进行抽奖