网页制作与网站建设的题,网站搜索怎么做php,群晖wordpress默认地址,嘉兴手机端建站模板基于VUE2转盘组件的开发 文章目录 基于VUE2转盘组件的开发前言一、开发步骤1.组件布局2.布局样式3.数据准备 二、最后效果总结 前言
因为之前的转盘功能是图片做的#xff0c;每次活动更新都要重做UI和前端#xff0c;为了解决这一问题进行动态配置转盘组件开发#xff0c;…基于VUE2转盘组件的开发 文章目录 基于VUE2转盘组件的开发前言一、开发步骤1.组件布局2.布局样式3.数据准备 二、最后效果总结 前言
因为之前的转盘功能是图片做的每次活动更新都要重做UI和前端为了解决这一问题进行动态配置转盘组件开发可以减少一些UI和前端的工作量。 一、开发步骤
1.组件布局 van-row classcontainer!-- turntableBox 为整个转盘容器为正方形大小由里面元素决定 --van-col span24 classturntableBox!-- turntableMain 为转盘底座比里面的内容大显示为效果图灰色外圈但不是空心圆 --div classturntableMain :styleheight:${window.innerWidth * 0.8}px;width:${window.innerWidth * 0.8}px;!-- turntable 为转动区域作用是为了不让外圈一起转动 --div refturntable classturntable:styleheight:${window.innerWidth * 0.8}px;width:${window.innerWidth * 0.8}px;!-- Canvas 转盘饼图背景具体划分多少块由奖项决定 --Canvas /!-- prizeBox 奖项高为饼图的半径宽为饼图半径里面有多少块就多少分之一 --div classprizeBoxdiv classprizeItem :stylewidth:${perPrize.width}px;height:${perPrize.height}px;transform:translateX(-50%) rotate(-${(perPrize.degree * (index 1)) - (perPrize.degree / 2)}deg);left:calc(50%)v-for(item, index) in activeInfo.prizeList :keyindexp classtitle{{ item.name }}/pp classdescribe{{ item.describe }}/pimg :srcitem.img stylewidth: 38%; //div/div/div!-- 启动按钮 --van-image classgo fitcover width42px :srcgoPointer clickgo //div/van-col!-- 结果展示列表 --van-col span24div idresult/div/van-col/van-row2.布局样式
.turntableBox {margin-top: 10%;.turntableMain {margin: 0 auto;position: relative;border: 10px solid #E5E5E5;border-radius: 100%;}.turntable {transition: all 4s;margin: 0 auto;}.go {position: absolute;top: calc(50% - 31px);left: calc(50% - 21px);}.prizeBox {position: absolute;width: 80%;top: 0;left: calc(50% - 40%);.prizeItem {text-align: center;position: absolute;top: 0;overflow: hidden;text-align: center;transform-origin: center bottom;transform: translateX(-50%);color: #2c3e50;p {margin: 0;padding: 0;}.title {font-size: 18px;margin-top: 12px;}.describe {font-size: 14px;line-height: 28px;white-space: break-spaces;}img {margin-top: 6px;}}}
}3.数据准备 data 代码如下包含页面功能所需要的变量 data() {return {window,/** 活动设置 */activeInfo: {/** 中奖概率 */probabilities: {一等奖: 10,二等奖: 10,三等奖: 10,四等奖: 10,},/** 奖品信息 */prizeList: [{name: 一等奖,describe: 一等奖,img: https://img01.yzcdn.cn/vant/cat.jpeg},{name: 未中奖,describe: 未中奖,img: https://img01.yzcdn.cn/vant/cat.jpeg},{name: 二等奖,describe: 二等奖,img: https://img01.yzcdn.cn/vant/cat.jpeg},{name: 未中奖,describe: 未中奖,img: https://img01.yzcdn.cn/vant/cat.jpeg},{name: 三等奖,describe: 三等奖,img: https://img01.yzcdn.cn/vant/cat.jpeg},{name: 四等奖,describe: 四等奖,img: https://img01.yzcdn.cn/vant/cat.jpeg},]},/** 是否正在执行动画 */isGo: false,/** 执行动画的对象 */oTurntable: ,/** 即将旋转的度数 */randomDeg: 0,/** 上一次旋转的度数 */lastDeg: 0,/** 抽奖次数 */goTimes: 3,/** 奖品图片 */perPrize: {degree: null,width: null,height: null}}} created 代码如下主要处理角度、宽、高 created() {const params getAllParams();if (params) {this.params params;};/** 奖品 */const angle (360 / this.activeInfo.prizeList.length) / 2; // 对角角度const ratio Number(Math.sin(angle * (Math.PI * 2 / 360)).toFixed(2)); // 与半径的比率this.perPrize {degree: (360 / this.activeInfo.prizeList.length),width: Math.floor((window.innerWidth * ratio)) / 2,/** 高度是直径的一半 */height: window.innerWidth * 0.8 / 2}},mounted 代码如下获取转盘区域DOM元素方便后面操作 mounted() {this.oTurntable this.$refs.turntable;},methods 代码如下主要操作方法 /** 点击抽奖 */go() {/** 正在抽奖未结束继续点击无效 */if (!this.isGo this.goTimes 0) {/** 获取中奖结果再根据结果去转动转盘 */const result this.generatePrize();/** * 获取奖项下标* 奖项名字可能会重复所以需要找到奖项的所有下标保存到数组里* 根据下标数组随机生成一个数字来决定选择哪个下标成为最终结果的下标* */const resultIndexArray this.activeInfo.prizeList.reduce((acc, item, index) {if (item.name result) {acc.push(index);}return acc;}, []);const randomResultIndex Math.floor(Math.random() * resultIndexArray.length);const index resultIndexArray[randomResultIndex];/** 奖项总和数量 */const length this.activeInfo.prizeList.length;/** 调用旋转方法 */this.ratating((360 / length * index) (360 / length / 2), result);}else if (!this.isGo this.goTimes 0) {this.$toast({message: 抱歉您的抽奖次数用完了,duration: 3000,});}else {this.$toast(请勿重复点击)return}},/** 获取抽奖结果 */generatePrize() {/** 生成一个 0 到 99 之间的随机数 */const randomNum Math.floor(Math.random() * 100);let cumulativeProbability 0;/** 如果概率落在奖项范围内 */for (const prize in this.activeInfo.probabilities) {cumulativeProbability this.activeInfo.probabilities[prize];if (randomNum cumulativeProbability) {/** 返回中奖内容 */return prize;}}// 默认返回未中奖return 未中奖;},/** 该方法能产生[n,m]之间随机数,决定转盘转多少圈 */getRandom(n, m) {let result Math.floor(Math.floor(Math.random() * (m - n 1) n))return result;},/** 旋转 */ratating(deg, text) {this.goTimes--;this.isGo true;/** 旋转圈数 */let turnNumber this.getRandom(3, 6);/** 记录这次要旋转的度数(传来的度数圈数) */this.randomDeg deg 360 * turnNumber;/*上次指针离初始状态的度数 上次的度数 这次要旋转的度数(这样的目的是为了每次旋转都从原点开始保证数据准确)*/let realDeg (360 - this.lastDeg % 360) this.lastDeg this.randomDeg;/** 为对象添加执行动画 */this.oTurntable.style.transform rotate(${realDeg}deg);setTimeout(() {this.isGo false;var list document.getElementById(result);list.innerHTML /未中奖/.test(text) ? p很遗憾您${text}/p : p恭喜您获得${text}/p;/** 把这次度数存储起来方便下一次获取 */this.lastDeg realDeg;}, 4000);}canvas 组件代码如下主要使用canvas标签根据奖项长度进行角度划分绘画 templatecanvas classcanvas idcanvasImg :stylewidth:${perimeter}px;height: ${perimeter}px;您的浏览器不支持canvas/canvas
/templatescriptexport default {name: Canvas,components: {},data() {return {/** 直径 */perimeter: 320,}},created() {},mounted() {this.perimeter window.innerWidth * 0.8;this.drawPie();},methods: {/** 画饼图 */drawPie() {const PI Math.PI;/** 获取画布并获取2d上下文对象 */const canvas document.getElementById(canvasImg);const ctx canvas.getContext(2d);/** 假设周长为500 */const perimeter this.perimeter;/** 半径 */const radius perimeter * 0.5;/** 总奖品数需要根据实际数据长度从父组件传入 */const prizeTotal 6;/** 每个扇形的角度360度 / 总奖品数 */const degree 360 / prizeTotal;/** 画布宽高 */canvas.width perimeter;canvas.height perimeter;/** 根据奖品数把圆形分成等份的扇形 */for (let i 0; i prizeTotal; i) {/** 奇偶颜色 */const color i % 2 0 ? #F8D383 : #F8E2BC;/** 开始一条新路径 */ctx.beginPath();/** 设置路径起点 */ctx.moveTo(radius, radius);/** 填充颜色 */ ctx.fillStyle color;/** 绘制扇形 圆心坐标圆心坐标半径扇形起始角度扇形终止角度 */ctx.arc(radius, radius, radius, (270 - degree (degree * i)) * PI / 180, (270 - degree degree (degree * i)) * PI / 180);/** 自动绘制一条当前点到起点的直线形成一个封闭图形省却使用一次moveTo方法。 */ctx.closePath();/** 闭合路径 */ctx.fill();}}},
}
/scriptstyle langless/style
二、最后效果 总结
本文仅仅简单记录了转盘组件的基本实现仅供学习参考。
