日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

最近在看一些組件庫的時候，發(fā)現(xiàn)他們有一種效果還挺好看的，就是點擊會有水波效果~

圖片

所以就想寫一個 Vue 的自定義指令指令來實現(xiàn)這個效果：v-ripple

使用方式是這樣的：

我是一個按鈕

實現(xiàn)思路

思路就是，點擊了按鈕某一處時，往按鈕dom中插入一個圓dom，這個圓dom是相對于按鈕去定位的，坐標就是(x1,y1)，至于(x1,y1)要怎么去算呢？其實很簡單啊

1、先算出鼠標點擊相對于按鈕的坐標(x,y)

2、(x-半徑,y-半徑) -> (x1,y1)

至于(x,y)要怎么算？也很簡單?。ㄓ玫絞etBoundingClientRect）

1、算出鼠標點擊的全局坐標

2、算出按鈕的全局坐標

3、鼠標按鈕坐標減去按鈕坐標，就能得到(x,y)

圖片

開始實現(xiàn)

首先我們準備好基礎的樣式

// 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之前，要刪除圓dom，這樣才能確保只有一個圓dom

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;

  // 創(chuàng)建一個圓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);
  },
};

結語

我是林三心

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

網站標題：點擊產生水波紋效果，Vue自定義指令20行代碼搞定～
網站URL：http://www.dlmjj.cn/article/djsgipe.html