vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
70 lines (69 loc) • 1.89 kB
JavaScript
import { ref as v, onMounted as p, onUnmounted as N } from "vue";
const y = (a, n) => {
const l = v(""), e = v(null), d = ({
//默认宽度为
width: c = a.width,
//默认高度为
height: o = a.height,
//默认内容
content: r = a.content,
//默认字体
font: m = "12px uucn",
//默认颜色
color: f = a.color,
//默认偏转角度
degree: h = -22,
//默认偏移量x1和y1
x1: g = 40,
y1: b = 80,
//默认偏移量x2和y2
x2: x = 350,
y2: k = 550
}) => {
const u = document.createElement("canvas");
u.width = c, u.height = o;
const t = u.getContext("2d");
return t && (t.font = m, t.fillStyle = f, t.rotate(h * Math.PI / 180), t.fillText(r, g, b), t.fillText(r, x, k)), l.value = u.toDataURL("image/png"), l.value;
}, i = () => {
n.value && (e.value && e.value.parentNode && e.value.parentNode.removeChild(e.value), d({
content: a.content
}), e.value = document.createElement("div"), e.value.className = "water-mark", Object.assign(e.value.style, {
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
zIndex: "0",
pointerEvents: "none",
backgroundImage: `url(${l.value})`,
backgroundRepeat: "repeat"
}), n.value.appendChild(e.value));
}, s = new MutationObserver((c) => {
for (const o of c) {
for (const r of Array.from(o.removedNodes))
if (r === e.value) {
i();
return;
}
if (o.target === e.value) {
i();
return;
}
}
});
p(() => {
i(), n.value && s.observe(n.value, {
//观察直接子节点
childList: !0,
//不观察所有后代节点
subtree: !0,
//观察属性变化
attributes: !0
});
}), N(() => {
s.disconnect();
});
};
export {
y as useWater
};