怎么建网站快捷方式,鲜花网站模板,中国建设银行手机网站下载,线上推广平台有哪些目录 需求背景需求实现实现过程图片示意实现代码 页面效果lucky-canvas 插件官方文档 需求背景 要求实现转盘转动抽奖的功能#xff1a; 只有正确率大于等于 80% 才可以进行抽奖#xff1b;“谢谢参与”概率为 90%#xff0c;“恭喜中奖”概率为 10%#xff1b; 需求实现 实… 目录 需求背景需求实现实现过程图片示意实现代码 页面效果lucky-canvas 插件官方文档 需求背景 要求实现转盘转动抽奖的功能 只有正确率大于等于 80% 才可以进行抽奖“谢谢参与”概率为 90%“恭喜中奖”概率为 10% 需求实现 实现过程图片示意 实现代码
安装插件
npm install lucky-canvas/vuelatestmain.js 全局引入组件
import VueLuckyCanvas from lucky-canvas/vue
Vue.use(VueLuckyCanvas)实现代码
templatediv classexam-resultdiv classinfodiv classprogressnut-circleprogress:progress(correct / total).toFixed(1) * 100:is-autotruecolor#ff4d4fpath-color#ffededdiv classprogressDivdiv classaccuracy正确率{{ (correct / total).toFixed(1) * 100 }}%/div/div/nut-circleprogress/div/divdiv classcontentdiv classresult-tablediv stylepadding: 10px 10px 10px 15px试卷分析/div/divdiv classresult-tablediv classitemdiv classtitle题目总量:/divdiv classtotal{{ total }}/divdiv classunit题/div/div/divdiv classresult-tablediv classitemdiv classtitle正确题数:/divdiv classcorrect{{ correct }}/divdiv classunit题/div/divdiv classitemdiv classtitle错误题数:/divdiv classerror{{ total - correct }}/divdiv classunit题/div/div/div/divdiv v-ifexamType challenge (correct / total).toFixed(1) 0.8 classlottery_draw_btn恭喜您获得抽奖资格 nut-button typeprimary sizemini clicktoLotteryDraw点击进行抽奖/nut-button/divnut-dialog teleport#app :titleisShowlotteryDraw ? 点击“开始”抽奖 : content v-model:visibledialogVisible customClasstask :noCancelBtntrue :noOkBtntrue :closeOnClickOverlayfalsenut-icon nameclose clickdialogVisible false /LuckyWheelv-ifisShowlotteryDrawclassmyLuckyrefmyLuckyRefwidth320pxheight320px:prizesprizes:blocksblocks:buttonsbuttonsstartstartCallbackendendCallback/div v-else classresult :style{--color: lotteryDrawIndex 1 ? red : #000}{{ lotteryDrawIndex 1 ? 恭喜中奖 : 谢谢参与 }}/div/nut-dialog/divfallback/fallback
/templatescript
import {reactive, toRefs, ref, getCurrentInstance
} from vue
import { useRoute } from vue-routerexport default {name: result,setup() {// const myLuckyRef ref(null) // 【ref问题】我的代码里这种办法取不到 ref使用 getCurrentInstance 取 refconst instance getCurrentInstance() // 【ref解决】使用 getCurrentInstance 取 refconst route useRoute()const state reactive({lotteryDrawIndex: 0, // 最终转盘定格的索引isShowlotteryDraw: true, // 是否抽奖完成// 转盘背景配置blocks: [{padding: 20px,imgs: [{// src: https://img.iwave.net.cn/jeep/51c95637a377c3a12d09abe8b0f975e6.png,src: require(/assets/images/lottery_draw.png),width: 320,height: 320,rotate: true}]}],// 每个扇形区域奖品配置prizes: [...Array(10).keys()].map((index) ({fonts: [{text: index % 2 0 ? 谢谢参与 : 恭喜中奖,top: 15%,fontSize: 15px,fontColor: #ed1c24,},],background: index % 2 0 ? #fff5cc : #e9d6e9,})),// 抽奖按钮配置buttons: [{ radius: 50px, background: #d034ac },{ radius: 45px, background: #fe97b2 },{radius: 35px,background: #f04a07,pointer: true,fonts: [{ text: 开始, top: -10px, fontColor: #fff }]}],// 抽奖弹框是否展示dialogVisible: false})// 获取正确题数、总题数const { correct, total, examType } route.queryconst toLotteryDraw () {state.dialogVisible true}// 点击抽奖按钮会触发star回调const startCallback () {console.log(开始抽奖----, 开始抽奖)// 调用抽奖组件的play方法开始游戏// console.log(myLucky.value----, myLuckyRef.value) // 【ref问题】// myLuckyRef.value?.play() // 【ref问题】if (instance) {instance.refs?.myLuckyRef?.play() // 【ref解决】}// this.$refs.myLucky.play() // 【ref】vue2写法// 模拟调用接口异步抽奖setTimeout(() {// 假设index谢谢参与90%恭喜中奖10%const index ${Math.random()}.slice(2, 3) * 1state.lotteryDrawIndex index 1 ? 1 : 2// 调用stop停止旋转并传递中奖索引// this.$refs.myLuckyRef.stop(index) // 【ref】vue2写法// myLuckyRef.value?.stop(index) // 【ref问题】if (instance) {instance.refs?.myLuckyRef?.stop(state.lotteryDrawIndex) // 【ref解决】}}, 3000)}// 抽奖结束会触发end回调const endCallback (prize) {console.log(结束抽奖----, 结束抽奖)console.log(prize)state.isShowlotteryDraw false}return {...toRefs(state),correct,total,examType,toLotteryDraw,startCallback,endCallback}}
}
/scriptstyle scoped langless
.exam-result {.info {margin: 0 0 5px;padding: 10px;background-color: white;.progress {display: flex;flex-direction: column;align-items: center;padding: 5px;position: relative;.nut-circleprogress {width: 145px !important;height: 145px !important;position: relative;.progressDiv {display: flex;flex-direction: column;align-items: center;.accuracy {color: #00000080;background-color: #ffeded;padding: 2px 8px;font-size: 13px;border-radius: 5px;}}}.circle {position: absolute;height: 145px;width: 145px;background-color: #ffeded;border-radius: 50%;top: 5px;left: 50%;transform: translate(-50%);.circle1 {position: absolute;height: 115px;width: 115px;background-color: #ffffff;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);}}}.count {background-color: #fffbf3;margin-top: 10px;padding-top: 5px;color: #797e79;font-size: 14px;display: flex;justify-content: space-around;.centerDiv {display: flex;align-items: baseline;justify-content: center;.number {margin-right: 5px;font-size: 20px;color: #FAAD14;}.text {font-size: 12px;}}}}.content {margin-bottom: 10px;background: white;border-bottom: 1px solid #dcdcdc;.result-table {display: flex;font-size: 16px;font-weight: bolder;color: #000;.item {display: flex;align-items: baseline;border-top: 0.5px solid #dcdcdc;flex: 1;font-size: 16px;padding: 10px 10px 10px 15px;color: #7f7f7f;font-weight: normal;:nth-child(2n1) {border-right: 0.5px solid #dcdcdc;}.title {margin-right: 5px;font-size: 14px;}.unit {font-size: 12px;margin-left: 5px;}.time,.total {color: black;font-size: 16px;}.correct {color: #04be01;font-size: 18px;}.error {color: red;font-size: 18px;}}}}// 弹框样式::v-deep .popup-center.round {width: 90%;.nut-dialog {width: 100%;padding: 20px 5px;.nut-dialog__content {max-height: unset;.nut-icon-close {position: absolute;top: 15px;right: 15px;}// 转盘结束展示结果.result {height: 80px;line-height: 80px;font-size: 20px;font-weight: bold;color: var(--color);}// 转盘.myLucky {display: inline-block;}}}}// 抽奖弹框按钮.lottery_draw_btn {height: 25PX;line-height: 25PX;padding: 0 10px;cursor: pointer;font-size: 16px;color: red;}
}
/style
页面效果 lucky-canvas 插件官方文档 lucky-canvas 插件官网 lucky-canvas 插件官网文档
可参考文档
