废话不多说,直接上代码
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>
效果: