摘要：
一 语法 reduce 为数组中的每一个元素依次执行回调函数 arr.reduce(callback,[initialValue]) callback （执行数组中每个值的函数，包含四个参数） 1、previousValue 必需。（上一次调用回调返回的值，或者是提供的初始值（initialValu 阅读全文
摘要：
本篇主要讲述九宫格上传图片 图片编辑实现效果: 图片编辑实现原理: 实现九宫格编辑图片可以做成一个组件,使用原生的图片上传方式通过 input 标签上传图片 一般图片都挺大,避免用户等待时间过长,使用 canvas 将上传的图片进行压缩 每次成功上传一张图片 && 图片总量 < 9 就在图片数组后p 阅读全文
摘要：
效果图展示: 这是一个比较简易的文本编辑框显示,此文主要讲文本编辑相关~ 文本编辑实现原理分析: 一般涉及到文本编辑,我们通常会使用 input 输入框来实现,但是像一些需要含有特殊样式标题的文本编译框,input 显然满足不了我们的需求,这时候我们需要用到一个可以使任何元素都可以具有编辑功能的属性 阅读全文
摘要：
前言: 有看到,打开某博客后,切换到其他页面,该博客标签栏标题随之发生改变,切回去后,标题显示:欢迎回来,2s后更改为原标题 感觉很酷炫,怎么能不学一下喽 查询后发现有一个监听标签栏更改的事件: visibilitychange ,那就他了 上代码: mounted() { // js监听浏览器切换 阅读全文
摘要：
有时在后台我们需要对输入的数值进行简单的正则验证,此时ElementUi 自带的验证已不能满足我们的需求,故需要我们自己去写 验证规则 有两种书写位置: 一种在data中写规则 另一种在methods中写规则 表单: <el-form-item label="需求砍价人数：" prop="haggl 阅读全文
摘要：
先上效果图 稍稍解释一下: 由于截屏不到点击时状态效果,姑且用红色框框代表点击时效果 实现原理: 首先从样式上看,分两种状态: 编辑时与完成时,这两种状态的样式需要先写好,通过变量控制类名去实现 下面列表中每一个应用都有2种状态:+/- 这里可以给每个元素一个默认变量值为false,改变时变为tru 阅读全文
摘要：
想要实现的效果: 顶部tab栏标题与下面列表标题对应,滚动超过tab栏高度,吸顶定位 向下滚动时,列表出现标题与顶部tab栏高亮标题对应 点击顶部tab栏标题,下面列表滚动到对应标题,且tab标题栏相应左右滚动到合适位置 具体效果如图: 又到了说实现原理的时刻,让我想想哈,有了如下: 1.吸顶: 给 阅读全文
摘要：
上一篇说道大转盘抽奖,今天来说说九宫格抽奖 实现原理: 1.将奖品按照抽奖转动的顺序通过css去定位 2.通过索引控制一个高亮的类名,来实现跑马灯的效果 3.一般这种跑马灯转动是有速度的转变效果,先快后慢,最后停止,要实现这个效果,可以在一个定时器内进行操作 实现代码: 1.HTML: <templ 阅读全文
摘要：
想要开发一个,可进行配置奖品的大转盘抽奖活动:如下图: 要求: 转盘底图可配置,相对应的奖品也能够配置 开发思路: 可以把转盘开发成一个组件,所有参数皆是可配置的,做成组件具有公用型 通过 transform的rotate旋转 以及 transition过渡来实现动画 确定旋转实现的原理,不想能像表 阅读全文
摘要：
先看一下效果图: ps: 图片有晃动的效果,是博主截图大小不一致造成的,以至于合成的gif图有晃动的效果,实际页面中是没有的,请勿担心哦 实现的原理: 1.通过canvas标签属性进行绘画实现 2.实际有3层,底层是存放奖品名称,中层是canvas画出的刮层,表层是那个红色的礼节 通过absolut 阅读全文