本篇内容主要讲解“Vue怎么实现加水波纹效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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。

代码实现

上面我们分析了分析，接下来我们用代码实现。

结构：

<divclass="app"><h2>{{title}}</h2><buttonv-shuibowen="">点我发散水波纹</button><!--<divclass="box"v-shuibowen=""></div>--></div>

实例化一个vue对象。

constvm=newVue({data:{title:"自定义指定设置水波纹"}}).$mount(".app")

自定义指令

Vue.directive('shuibowen',{//binding指令携带的变量数据inserted:function(el,binding){el.addEventListener('click',function(e){letx=e.clientX-el.offsetLeftlety=e.clientY-el.offsetTop//在鼠标位置增加一个span标签letspan=document.createElement("span")span.style.position="absolute"span.style.background=binding.value||'rgba(150,91,91,.5)'span.style.opacity=1;span.style.borderRadius='50%'el.append(span)letwidth=0letheight=0letopacity=1letmax_length=Math.sqrt(el.offsetWidth*el.offsetWidth+el.offsetHeight*el.offsetHeight)*2lettime=setInterval(()=>{width+=5height+=5opacity-=0.01//判断超出最大值时，清除定时，并且删除spanif(width<max_length){span.style.width=width+'px'span.style.height=height+'px'span.style.opacity=opacity;span.style.left=x-span.offsetWidth/2+'px'span.style.top=y-span.offsetHeight/2+'px'}else{clearInterval(time)time=null;span.remove()}},10)})}})

到此，相信大家对“Vue怎么实现加水波纹效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！