vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
155 lines (154 loc) • 6.24 kB
JavaScript
import { defineComponent as K, shallowRef as x, computed as c, watch as Q, onMounted as V, onBeforeUnmount as ee, createElementBlock as te, openBlock as ae, renderSlot as ne } 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, S = x(), l = x(), g = x(document.documentElement), L = x(g.value.classList.contains("dark")), R = x(!1), y = c(() => a.gap?.[0] ?? 100), b = c(() => a.gap?.[1] ?? 100), M = c(() => y.value / 2), I = c(() => b.value / 2), Y = c(() => a.offset?.[0] ?? M.value), H = c(() => a.offset?.[1] ?? I.value), z = 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, n = H.value - I.value;
return t > 0 && (e.left = `${t}px`, e.width = `calc(100% - ${t}px)`, t = 0), n > 0 && (e.top = `${n}px`, e.height = `calc(100% - ${n}px)`, n = 0), e.backgroundPosition = `${t}px ${n}px`, e;
});
Q(
() => [a],
() => {
w();
},
{
deep: !0,
// 强制转成深层侦听器
flush: "post"
// 在侦听器回调中访问被 Vue 更新之后的 DOM
}
), V(() => {
w();
}), ee(() => {
W();
}), D(
g,
() => {
L.value = g.value.classList.contains("dark"), W(), w();
},
{ attributeFilter: ["class"] }
), D(a.fullscreen ? g : S, j, {
subtree: !0,
// 监听以 target 为根节点的整个子树
childList: !0,
// 监听 target 节点中发生的节点的新增与删除
attributes: !0,
// 观察所有监听的节点属性值的变化
attributeFilter: ["style", "class"]
// 声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。
});
function j(e) {
R.value || e.forEach((t) => {
J(t, l.value) && (W(), w());
});
}
function W() {
l.value && (l.value.remove(), l.value = void 0);
}
function B(e, t) {
S.value && l.value && (R.value = !0, l.value.setAttribute(
"style",
Z({
...U.value,
backgroundImage: `url('${e}')`,
backgroundSize: `${(y.value + t) * z.value}px`
})
), a.fullscreen ? (g.value.setAttribute("style", "position: relative"), g.value.append(l.value)) : S.value?.append(l.value), setTimeout(() => {
R.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, n = 64;
const o = 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(o) ? o : [o], m = i.map((u) => e.measureText(u).width);
t = Math.ceil(Math.max(...m)), n = Number(d) * i.length + (i.length - 1) * P;
}
return [s ?? t, f ?? n];
}
function T() {
return window.devicePixelRatio || 1;
}
function E(e, t, n, o, 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(o / 2, 0), (Array.isArray(f) ? f : [f])?.forEach(($, k) => {
e.fillText($ ?? "", t, n + k * (p + P * s));
});
}
function w() {
const e = document.createElement("canvas"), t = e.getContext("2d"), n = a.image, o = a.rotate ?? -22;
if (t) {
l.value || (l.value = document.createElement("div"));
const r = T(), [s, f] = q(t), d = (y.value + s) * r, v = (b.value + f) * r;
e.setAttribute("width", `${d * z.value}px`), e.setAttribute("height", `${v * z.value}px`);
const i = y.value * r / 2, m = b.value * r / 2, u = s * r, p = f * r, F = (u + y.value * r) / 2, $ = (p + b.value * r) / 2, k = i + d, N = m + v, _ = F + d, C = $ + v;
if (t.save(), A(t, F, $, o), n) {
const h = new Image();
h.onload = () => {
t.drawImage(h, i, m, u, p), t.restore(), A(t, _, C, o), t.drawImage(h, k, N, u, p), B(e.toDataURL(), s);
}, h.crossOrigin = "anonymous", h.referrerPolicy = "no-referrer", h.src = n;
} else
E(t, i, m, u, p), t.restore(), A(t, _, C, o), E(t, k, N, u, p), B(e.toDataURL(), s);
}
}
function A(e, t, n, o) {
e.translate(t, n), e.rotate(Math.PI / 180 * Number(o)), e.translate(-t, -n);
}
function J(e, t) {
let n = !1;
return e.removedNodes.length && (n = Array.from(e.removedNodes).some((o) => o === t)), e.type === "attributes" && e.target === t && (n = !0), n;
}
return (e, t) => (ae(), te("div", {
ref_key: "containerRef",
ref: S,
style: { position: "relative" }
}, [
ne(e.$slots, "default")
], 512));
}
});
export {
le as default
};