vue 自定义指令实现Material风格的动画按钮

 废话不多说，直接上代码

index.ts

/**
 * v-waves
 * 水波纹动画
 * 注意：当前动画颜色取用的是当前节点的字体颜色
 * 故：使用该指令需给 当前节点 设置 字体颜色，避免动画颜色错误
 */

import { App } from "vue";
import "./waves.css";

const context = "@@wavesContext";

//16进制颜色值转化为rgb
String.prototype.colorRgb = function (): string {
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = this.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "RGB(" + colorChange.join(",") + ")";
  } else {
    return color;
  }
};

//颜色转换
function colorChange(color: string, alpha: number): string {
  let rgbaVal = "";
  if (/^#/.test(color)) {
    colorChange(color.colorRgb(), alpha);
  } else if (/^(rgba|RGBA)/.test(color)) {
    rgbaVal = color.substring(5, color.lastIndexOf(","));
  } else if (/^(rgb|RGB)/.test(color)) {
    rgbaVal = color.substring(4, color.length - 1);
  }
  return `rgba(${rgbaVal},${alpha})`;
}

function handleClick(el: HTMLElement, binding: any) {
  function handle(e: any) {
    const customOpts = Object.assign({}, binding.value);
    // console.log(window.getComputedStyle(el)); //读取元素全部属性
    const opts = Object.assign(
      {
        ele: el, // 波纹作用元素
        type: "hit", // hit 点击位置扩散 center中心点扩展
        color: colorChange(window.getComputedStyle(el).color, 0.26), // 波纹颜色
      },
      customOpts
    );
    const target = opts.ele;
    if (target) {
      target.style.position = "relative";
      target.style.overflow = "hidden";
      const rect = target.getBoundingClientRect();
      let ripple = target.querySelector(".waves-ripple");
      if (!ripple) {
        ripple = document.createElement("span");
        ripple.className = "waves-ripple";
        ripple.style.height = ripple.style.width =
          Math.max(rect.width, rect.height) + "px";
        target.appendChild(ripple);
      } else {
        ripple.className = "waves-ripple";
      }
      switch (opts.type) {
        case "center":
          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + "px";
          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + "px";
          break;
        default:
          ripple.style.top =
            (e.pageY -
              rect.top -
              ripple.offsetHeight / 2 -
              document.documentElement.scrollTop || document.body.scrollTop) +
            "px";
          ripple.style.left =
            (e.pageX -
              rect.left -
              ripple.offsetWidth / 2 -
              document.documentElement.scrollLeft || document.body.scrollLeft) +
            "px";
      }
      ripple.style.backgroundColor = opts.color;
      ripple.className = "waves-ripple z-active";

      if (!el[context]) {
        el[context] = {
          removeHandle: handle,
        };
      } else {
        el[context].removeHandle = handle;
      }
      return false;
    }
  }

  return handle;
}

export default (app: App<Element>) => {
  //自定义指令
  app.directive("waves", (el: HTMLElement, binding) => {
    el.addEventListener("click", handleClick(el, binding), false);
  });
};

waves.css

.waves-ripple {
  position: absolute;
  margin: 0 !important;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  background-clip: padding-box;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 1;
}

.waves-ripple.z-active {
  opacity: 0;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 1.2s ease-out, transform 0.6s ease-out;
  transition: opacity 1.2s ease-out, transform 0.6s ease-out,
    -webkit-transform 0.6s ease-out;
}

在main.ts中注册指令

import { createApp } from "vue";
import directives from "@/directive/waves";
const app = createApp(App);
app.use(directives)

使用

<button v-waves>点击我</button>

效果：