点击产生水波纹效果，Vue自定义指令20行代码搞定～

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~sHY28资讯网——每日最新资讯28at.com

最近在看一些组件库的时候，发现他们有一种效果还挺好看的，就是点击会有水波效果~sHY28资讯网——每日最新资讯28at.com

图片sHY28资讯网——每日最新资讯28at.com

所以就想写一个 Vue 的自定义指令指令来实现这个效果：v-ripplesHY28资讯网——每日最新资讯28at.com

使用方式是这样的：sHY28资讯网——每日最新资讯28at.com

<Button v-ripple>我是一个按钮</Button>

实现思路

思路就是，点击了按钮某一处时，往按钮dom中插入一个圆dom，这个圆dom是相对于按钮去定位的，坐标就是(x1,y1)，至于(x1,y1)要怎么去算呢？其实很简单啊sHY28资讯网——每日最新资讯28at.com

1、先算出鼠标点击相对于按钮的坐标(x,y)sHY28资讯网——每日最新资讯28at.com

2、(x-半径,y-半径) -> (x1,y1)sHY28资讯网——每日最新资讯28at.com

至于(x,y)要怎么算？也很简单啊（用到getBoundingClientRect）sHY28资讯网——每日最新资讯28at.com

1、算出鼠标点击的全局坐标sHY28资讯网——每日最新资讯28at.com

2、算出按钮的全局坐标sHY28资讯网——每日最新资讯28at.com

3、鼠标按钮坐标减去按钮坐标，就能得到(x,y)sHY28资讯网——每日最新资讯28at.com

图片sHY28资讯网——每日最新资讯28at.com

开始实现

首先我们准备好基础的样式sHY28资讯网——每日最新资讯28at.com

// ripple.less#ripple {  position: absolute;  pointer-events: none;  background-color: rgb(30 184 245 / 70%);  border-radius: 50%;  transform: scale(0);  animation: ripple 600ms linear;}@keyframes ripple {  to {    opacity: 0;    transform: scale(4);  }}

接着就开始开发自定义指令了，我们要注意一件事，在插入圆dom之前，要删除圆dom，这样才能确保只有一个圆domsHY28资讯网——每日最新资讯28at.com

import './ripple.less';import type { Directive } from 'vue';export const RIPPLE_NAME = 'ripple';const createRipple = (el: HTMLElement, e: MouseEvent) => {  // 设置按钮overflow  el.style.overflow = 'hidden';  // 获取按钮的长宽  const { clientWidth, clientHeight } = el;  // 算出直径  const diameter = Math.ceil(Math.sqrt(clientWidth ** 2 + clientHeight ** 2));  // 算出半径  const radius = diameter / 2;  // 获取按钮的全局坐标  const { left, top } = el.getBoundingClientRect();  // 设置按钮的定位是relative  const position = el.style.position;  if (!position || position === 'static') {    el.style.position = 'relative';  }  // 获取鼠标点击全局坐标  const { clientX, clientY } = e;  // 创建一个圆dom  const rippleEle = document.createElement('div');  // 设置唯一标识id  rippleEle.id = RIPPLE_NAME;  // 设置长宽  rippleEle.style.width = rippleEle.style.height = `${diameter}px`;  rippleEle.style.left = `${clientX - radius - left}px`;  rippleEle.style.top = `${clientY - radius - top}px`;  // 插入圆dom  el.appendChild(rippleEle);};const removeRipple = (el: HTMLElement) => {  // 删除圆dom  const rippleEle = el.querySelector(`#${RIPPLE_NAME}`);  if (rippleEle) {    el.removeChild(rippleEle);  }};export const Ripple: Directive = {  mounted(el: HTMLElement) {    // 绑定点击事件    el.addEventListener('click', e => {      removeRipple(el);      createRipple(el, e);    });  },  unmounted(el: HTMLElement) {    // 组件卸载时记得删了    removeRipple(el);  },};

结语

我是林三心sHY28资讯网——每日最新资讯28at.com

• 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
• 一个偏前端的全干工程师；
• 一个不正经的掘金作者；
• 逗比的B站up主；
• 不帅的小红书博主；
• 喜欢打铁的篮球菜鸟；
• 喜欢历史的乏味少年；
• 喜欢rap的五音不全弱鸡如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 

本文链接：http://www.28at.com/showinfo-26-15750-0.html点击产生水波纹效果，Vue自定义指令20行代码搞定～

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 为什么 IT 项目仍然失败

下一篇： Envoy 基础入门教程，看这一篇就够了