前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~SqQ28資訊網(wǎng)——每日最新資訊28at.com

最近在看一些組件庫的時(shí)候，發(fā)現(xiàn)他們有一種效果還挺好看的，就是點(diǎn)擊會(huì)有水波效果~SqQ28資訊網(wǎng)——每日最新資訊28at.com

圖片SqQ28資訊網(wǎng)——每日最新資訊28at.com

所以就想寫一個(gè) Vue 的自定義指令指令來實(shí)現(xiàn)這個(gè)效果：v-rippleSqQ28資訊網(wǎng)——每日最新資訊28at.com

使用方式是這樣的：SqQ28資訊網(wǎng)——每日最新資訊28at.com

<Button v-ripple>我是一個(gè)按鈕</Button>

實(shí)現(xiàn)思路

思路就是，點(diǎn)擊了按鈕某一處時(shí)，往按鈕dom中插入一個(gè)圓dom，這個(gè)圓dom是相對(duì)于按鈕去定位的，坐標(biāo)就是(x1,y1)，至于(x1,y1)要怎么去算呢？其實(shí)很簡單啊SqQ28資訊網(wǎng)——每日最新資訊28at.com

1、先算出鼠標(biāo)點(diǎn)擊相對(duì)于按鈕的坐標(biāo)(x,y)SqQ28資訊網(wǎng)——每日最新資訊28at.com

2、(x-半徑,y-半徑) -> (x1,y1)SqQ28資訊網(wǎng)——每日最新資訊28at.com

至于(x,y)要怎么算？也很簡單啊（用到getBoundingClientRect）SqQ28資訊網(wǎng)——每日最新資訊28at.com

1、算出鼠標(biāo)點(diǎn)擊的全局坐標(biāo)SqQ28資訊網(wǎng)——每日最新資訊28at.com

2、算出按鈕的全局坐標(biāo)SqQ28資訊網(wǎng)——每日最新資訊28at.com

3、鼠標(biāo)按鈕坐標(biāo)減去按鈕坐標(biāo)，就能得到(x,y)SqQ28資訊網(wǎng)——每日最新資訊28at.com

圖片SqQ28資訊網(wǎng)——每日最新資訊28at.com

開始實(shí)現(xiàn)

首先我們準(zhǔn)備好基礎(chǔ)的樣式SqQ28資訊網(wǎng)——每日最新資訊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);  }}

接著就開始開發(fā)自定義指令了，我們要注意一件事，在插入圓dom之前，要?jiǎng)h除圓dom，這樣才能確保只有一個(gè)圓domSqQ28資訊網(wǎng)——每日最新資訊28at.com

import './ripple.less';import type { Directive } from 'vue';export const RIPPLE_NAME = 'ripple';const createRipple = (el: HTMLElement, e: MouseEvent) => {  // 設(shè)置按鈕overflow  el.style.overflow = 'hidden';  // 獲取按鈕的長寬  const { clientWidth, clientHeight } = el;  // 算出直徑  const diameter = Math.ceil(Math.sqrt(clientWidth ** 2 + clientHeight ** 2));  // 算出半徑  const radius = diameter / 2;  // 獲取按鈕的全局坐標(biāo)  const { left, top } = el.getBoundingClientRect();  // 設(shè)置按鈕的定位是relative  const position = el.style.position;  if (!position || position === 'static') {    el.style.position = 'relative';  }  // 獲取鼠標(biāo)點(diǎn)擊全局坐標(biāo)  const { clientX, clientY } = e;  // 創(chuàng)建一個(gè)圓dom  const rippleEle = document.createElement('div');  // 設(shè)置唯一標(biāo)識(shí)id  rippleEle.id = RIPPLE_NAME;  // 設(shè)置長寬  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) {    // 綁定點(diǎn)擊事件    el.addEventListener('click', e => {      removeRipple(el);      createRipple(el, e);    });  },  unmounted(el: HTMLElement) {    // 組件卸載時(shí)記得刪了    removeRipple(el);  },};

結(jié)語

我是林三心SqQ28資訊網(wǎng)——每日最新資訊28at.com

• 一個(gè)待過小型toG型外包公司、大型外包公司、小公司、潛力型創(chuàng)業(yè)公司、大公司的作死型前端選手；
• 一個(gè)偏前端的全干工程師；
• 一個(gè)不正經(jīng)的掘金作者；
• 逗比的B站up主；
• 不帥的小紅書博主；
• 喜歡打鐵的籃球菜鳥；
• 喜歡歷史的乏味少年；
• 喜歡rap的五音不全弱雞如果你想一起學(xué)習(xí)前端，一起摸魚，一起研究簡歷優(yōu)化，一起研究面試進(jìn)步，一起交流歷史音樂籃球rap，可以來俺的摸魚學(xué)習(xí)群哈哈，點(diǎn)這個(gè)，有7000多名前端小伙伴在等著一起學(xué)習(xí)哦 --> 

本文鏈接：http://www.tebozhan.com/showinfo-26-15725-0.html點(diǎn)擊產(chǎn)生水波紋效果，Vue自定義指令20行代碼搞定～

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： .Net開發(fā)之并行計(jì)算：提升應(yīng)用程序的計(jì)算能力

下一篇： 掌握Python輸入輸出：從鍵盤到文件的全面指南