vue抽奖组件的九宫格

.v-common-com-lottery{高度：100%；字体大小：.24rem；颜色：#fff；.列表{位置：相对；背景：淡蓝色；宽度：100%；底边距：100%；}.item{宽度：32%；底部填充：32%；.24rem;溢出：隐藏；&.item0{左：0;顶部：0；}&.item1{左：34%；顶部：0；}&.item2{左：68%；顶部：0；}&。item3{左：68%；顶部：34%；}&.item4{左：68%；最高：68%；}&.item5{左：34%；最高：68%；}&.item6{左：0;最高：68%；}&.item7{左：0；顶部：34%；}。我知道了在{位置：绝对；高度：100%；宽度：100%；z-索引：1；}.info{位置：绝对；左：0；底部：0；背景：线性渐变（rgba（0、0、0、0）、rgba（0、0、0、.5））；高度：.48rem；宽度：100%；z-指数：2；显示：弹性；对齐项目：居中；证明内容：居中；}.mask{位置：绝对；左：0；顶部：0；z-指数：3；宽度：100%；高度：100%；背景：rgba(0,0,0,.4);不透明度：0；}&.active.mask{不透明度：1；}}.btn{宽度：32%；底部填充：32%；背景：浅鲑鱼；位置：绝对；左：34%；顶部：34%；字体大小：.72rem；边界半径：.24rem；溢出：隐藏；.text{位置：绝对；高度：100%；宽度：100%；显示：弹性；对齐项目：居中；证明内容：居中；z-指数：2；}。面具{位置：绝对；高度：100%；宽度：100%；显示：弹性；对齐项目：居中；证明内容：居中；z-指数：2；}}.lucky-times{颜色：#000;-尺寸：.36rem；}}写在前面。由于一直从事前端工作，所以每次遇到技术问题都会向百度/谷歌请教。..可能是因为“懒”的原因（是的，就是因为懒），我从来没有发表过技术文章和开发经验，深感惭愧，所以我改变主意，决定分享一些东西。本文只是冰山一角，欢迎大家留言获取宝贵经验~。1、需求页面属于活跃页面a．进入页面会请求后台接口拉取当前用户的抽奖剩余次数b．点击九宫格开始按钮开始旋转，请求后台界面c．接口请求成功，根据接口返回的停止位置停止d.可以连续抽奖，直到抽奖次数为0。一般显示效果如下2.组件源码模板部分脚本part1.接口说明：如果本地localhost启动时，可以使用setTimeout模拟一个post请求。2.函数说明：move函数以100ms为单位旋转，最小旋转次数为12圈（一圈半，即防止界面返回太快，启动就停止），当界面返回成功后，记录当前索引和服务器返回停止停止位置stopIndex，并执行enter函数；enter函数循环100ms，接受参数，计算当前index和stopIndex的差值，如果>4，可以进行自减，当===4时；<=4，再次判断是否>-4（这个判断是计算旋转多少圈），执行停止函数；stop函数旋转300ms，只旋转4次，然后完成整个过程；3、对于setInterval，当组件销毁时，定时器style部分关于正方形布局，通过{width:100%;padding-bottom:100%;}实现.v-common-com-lottery{高度：100%；字体大小：.24rem；颜色：#fff；.列表{位置：相对；背景：淡蓝色；宽度：100%；底边距：100%；}.item{宽度：32%；底部填充：32%；.24rem;溢出：隐藏；&.item0{左：0;顶部：0；}&.item1{左：34%；顶部：0；}&.item2{左：68%；顶部：0；}&。item3{左：68%；顶部：34%；}&.item4{左：68%；最高：68%；}&.item5{左：34%；最高：68%；}&.item6{左：0;最高：68%；}&.item7{左：0；顶部：34%；}。我知道了在{位置：绝对；高度：100%；宽度：100%；z-索引：1；}.info{位置：绝对；左：0；底部：0；背景：线性渐变（rgba（0、0、0、0）、rgba（0、0、0、.5））；高度：.48rem；宽度：100%；z-指数：2；显示：弹性；对齐项目：居中；证明内容：居中；}.mask{位置：绝对；左：0；顶部：0；z-指数：3；宽度：100%；高度：100%；背景：rgba(0,0,0,.4);不透明度：0；}&.active.mask{不透明度：1；}}.btn{宽度：32%；底部填充：32%；背景：浅鲑鱼；位置：绝对；左：34%；顶部：34%；字体大小：.72rem；边界半径：.24rem；溢出：隐藏；.text{位置：绝对；高度：100%；宽度：100%；显示：弹性；对齐项目：居中；证明内容：居中；z-指数：2；}。面具{位置：绝对；高度：100%；宽度：100%；显示：弹性；对齐项目：居中；证明内容：居中；z-指数：2；}}.lucky-times{颜色：#000;-尺寸：.36rem；}}@common/js/ajax源码如下//https://github.com/axios/axiosconstaxios=require('axios');//超时15秒//axios.defaults.timeout=15000;//允许发送cookieaxios.defaults.withCredentials=true;/***获取请求*@param{string}url-请求的路径*@param{Object}params-参数*@return{Promise}*/exportfunctionget(url,params={}){returnaxios.get(url,{params,});}/***postrequest*@param{string}url-请求路径*@param{Object}data-参数*@param{Object}config-原始配置*@return{Promise}*/exportfunctionpost(url,data={},config={}){returnaxios.post(url,data,config);}deepQuery源码如下/***深度查询deepQuery({},"a","b","c")*@param{any}要查询的func对象*@return{boolean}trueorfalse*/exportfunctiondeepQuery(obj,...args){returnargs.reduce((a,b)=>(a?a[b]:a),obj);}3.写在后面，欢迎大家指正。稍后会分享自定义日历组件/城市位置选择组件等，欢迎大家一起讨论学习！