前言
大家好，我是不吃鱼d猫，过年以来。断更许久，又回来了，学无止境，作为程序员知识是要不断更新迭代的。在此期间，接触了几天的vue，确实好用，今天给大家说个好玩的，在做项目过程中，点击按钮，大家肯定会接触过很花的效果。接下来给大家说说水波纹效果。
自定义指令
指令的作用
言简意赅，就是操作底层dom
当然vue自身有非常强大的指令功能，代替你进行dom操作，比如v-on绑定事件对不对，这应该大家熟悉的指令，100%要用到，毕竟js就是个事件驱动的语言。还有大家可以去官方文档去看看
水波纹
水波纹效果
如上图所示，点击按钮时鼠标四周会发散一个圆像水波一样。
实现
原理
我们在点击的时候，鼠标会发散一个圆，是不是有点击事件触发了，此时我们就增加一个span标签，当然要给他设置宽高，等属性，而且我们观察，圆的颜色是慢慢没有的，所以还有opacity属性，还有span是不是跟随鼠标移动的，所以还有添加定位属性。
核心
注意发现，span发散的圆是不断变大的，所以宽高是不断变化的，变化，我们就能想到定时器，定时器里面就可以控制圆的宽高，让span变化的属性不断有规律变化，当然要有临界值，我们可以看看下图
我们可以看看需求，水波纹，肯定是要覆整个按钮的，那么span的发散半径肯定就是按钮中最大的距离，如图所示，对角线肯定最长边，一目了然。怎么求，在构造函数math有个方法可以求math.sqrt（a*a+b*b）所以span的宽高是2倍的最长距离。所以临界值找到了，达到都就清除定时器，让span的属性不在变化。并且删除span。
代码实现
上面我们分析了分析，接下来我们用代码实现。
结构：
实例化一个vue对象。
自定义指令
总结
刚接触vue，代码没有优化，望见谅。自定义水波纹指令的好处就是，哪里需要用到水波纹的效果就往哪里加。
到此这篇关于vue自定义加水波纹效果指令的文章就介绍到这了,更多相关vue自定义水波纹指令内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
