vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
170 lines (169 loc) • 6.56 kB
JavaScript
import { defineComponent as K, shallowRef as S, computed as c, watch as Q, onMounted as V, onBeforeUnmount as ee, createElementBlock as te, openBlock as ae, renderSlot as oe } from "vue";
import { useMutationObserver as D } from "../utils/index.js";
const P = 3, le = /* @__PURE__ */ K({
__name: "Watermark",
props: {
width: { default: void 0 },
height: { default: void 0 },
layout: { default: "alternate" },
rotate: { default: -22 },
zIndex: { default: 90 },
image: { default: void 0 },
content: { default: void 0 },
fullscreen: { type: Boolean, default: !1 },
fixed: { type: Boolean, default: !0 },
textStyle: { default: () => ({
color: "rgba(0, 0, 0, 0.15)",
fontSize: 16,
fontWeight: "normal",
fontFamily: "sans-serif",
fontStyle: "normal"
}) },
gap: { default: () => [100, 100] },
offset: { default: () => [50, 50] }
},
setup(X) {
const a = X, b = S(), l = S(), g = S(document.documentElement), L = S(g.value.classList.contains("dark")), z = S(!1), x = c(() => {
var e;
return ((e = a.gap) == null ? void 0 : e[0]) ?? 100;
}), w = c(() => {
var e;
return ((e = a.gap) == null ? void 0 : e[1]) ?? 100;
}), M = c(() => x.value / 2), I = c(() => w.value / 2), Y = c(() => {
var e;
return ((e = a.offset) == null ? void 0 : e[0]) ?? M.value;
}), H = c(() => {
var e;
return ((e = a.offset) == null ? void 0 : e[1]) ?? I.value;
}), W = c(() => ({
parallel: 1,
alternate: 2
})[a.layout]), O = c(() => a.fullscreen && a.fixed), U = c(() => {
const e = {
zIndex: a.zIndex ?? 9,
position: O.value ? "fixed" : "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
pointerEvents: "none",
backgroundRepeat: "repeat"
};
L.value && (e.filter = "invert(1) hue-rotate(180deg)");
let t = Y.value - M.value, o = H.value - I.value;
return t > 0 && (e.left = `${t}px`, e.width = `calc(100% - ${t}px)`, t = 0), o > 0 && (e.top = `${o}px`, e.height = `calc(100% - ${o}px)`, o = 0), e.backgroundPosition = `${t}px ${o}px`, e;
});
Q(
() => [a],
() => {
$();
},
{
deep: !0,
// 强制转成深层侦听器
flush: "post"
// 在侦听器回调中访问被 Vue 更新之后的 DOM
}
), V(() => {
$();
}), ee(() => {
A();
}), D(
g,
() => {
L.value = g.value.classList.contains("dark"), A(), $();
},
{ attributeFilter: ["class"] }
), D(a.fullscreen ? g : b, j, {
subtree: !0,
// 监听以 target 为根节点的整个子树
childList: !0,
// 监听 target 节点中发生的节点的新增与删除
attributes: !0,
// 观察所有监听的节点属性值的变化
attributeFilter: ["style", "class"]
// 声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。
});
function j(e) {
z.value || e.forEach((t) => {
J(t, l.value) && (A(), $());
});
}
function A() {
l.value && (l.value.remove(), l.value = void 0);
}
function B(e, t) {
var o;
b.value && l.value && (z.value = !0, l.value.setAttribute(
"style",
Z({
...U.value,
backgroundImage: `url('${e}')`,
backgroundSize: `${(x.value + t) * W.value}px`
})
), a.fullscreen ? (g.value.setAttribute("style", "position: relative"), g.value.append(l.value)) : (o = b.value) == null || o.append(l.value), setTimeout(() => {
z.value = !1;
}));
}
function G(e) {
return e.replace(/([A-Z])/g, "-$1").toLowerCase();
}
function Z(e) {
return Object.keys(e).map((t) => `${G(t)}: ${e[t]};`).join(" ");
}
function q(e) {
let t = 120, o = 64;
const n = a.content, r = a.image, s = a.width, f = a.height, d = a.textStyle.fontSize ?? 16, v = a.textStyle.fontFamily ?? "sans-serif";
if (!r && e.measureText) {
e.font = `${Number(d)}px ${v}`;
const i = Array.isArray(n) ? n : [n], m = i.map((u) => e.measureText(u).width);
t = Math.ceil(Math.max(...m)), o = Number(d) * i.length + (i.length - 1) * P;
}
return [s ?? t, f ?? o];
}
function T() {
return window.devicePixelRatio || 1;
}
function E(e, t, o, n, r) {
const s = T(), f = a.content, d = a.textStyle.fontSize ?? 16, v = a.textStyle.fontWeight ?? "normal", i = a.textStyle.fontFamily ?? "sans-serif", m = a.textStyle.fontStyle ?? "normal", u = a.textStyle.color ?? "rgba(0, 0, 0, 0.15)", p = Number(d) * s;
e.font = `${m} normal ${v} ${p}px/${r}px ${i}`, e.fillStyle = u, e.textAlign = "center", e.textBaseline = "top", e.translate(n / 2, 0);
const h = Array.isArray(f) ? f : [f];
h == null || h.forEach((k, R) => {
e.fillText(k ?? "", t, o + R * (p + P * s));
});
}
function $() {
const e = document.createElement("canvas"), t = e.getContext("2d"), o = a.image, n = a.rotate ?? -22;
if (t) {
l.value || (l.value = document.createElement("div"));
const r = T(), [s, f] = q(t), d = (x.value + s) * r, v = (w.value + f) * r;
e.setAttribute("width", `${d * W.value}px`), e.setAttribute("height", `${v * W.value}px`);
const i = x.value * r / 2, m = w.value * r / 2, u = s * r, p = f * r, h = (u + x.value * r) / 2, k = (p + w.value * r) / 2, R = i + d, N = m + v, _ = h + d, C = k + v;
if (t.save(), F(t, h, k, n), o) {
const y = new Image();
y.onload = () => {
t.drawImage(y, i, m, u, p), t.restore(), F(t, _, C, n), t.drawImage(y, R, N, u, p), B(e.toDataURL(), s);
}, y.crossOrigin = "anonymous", y.referrerPolicy = "no-referrer", y.src = o;
} else
E(t, i, m, u, p), t.restore(), F(t, _, C, n), E(t, R, N, u, p), B(e.toDataURL(), s);
}
}
function F(e, t, o, n) {
e.translate(t, o), e.rotate(Math.PI / 180 * Number(n)), e.translate(-t, -o);
}
function J(e, t) {
let o = !1;
return e.removedNodes.length && (o = Array.from(e.removedNodes).some((n) => n === t)), e.type === "attributes" && e.target === t && (o = !0), o;
}
return (e, t) => (ae(), te("div", {
ref_key: "containerRef",
ref: b,
style: { position: "relative" }
}, [
oe(e.$slots, "default")
], 512));
}
});
export {
le as default
};