uv-ui
Version:
基于vue3的移动端组件库
141 lines (140 loc) • 3.59 kB
JavaScript
import { ref as h, watchEffect as x, watch as k, nextTick as p, openBlock as o, createElementBlock as g, normalizeClass as b, normalizeStyle as u, createElementVNode as m, renderSlot as B, toDisplayString as S } from "vue";
import "./water-mark.vue_vue_type_style_index_0_lang.js";
const U = ["viewBox"], N = ["href", "xlink:href", "width", "height"], R = ["width", "height"], $ = {
name: "UvWaterMark"
}, O = /* @__PURE__ */ Object.assign($, {
props: {
width: {
type: Number,
default: 100
},
height: {
type: Number,
default: 100
},
rotate: {
type: Number,
default: -22
},
image: {
type: String
},
textColor: {
type: String,
default: "#dcdee0"
},
content: {
type: String
},
full: {
type: Boolean,
default: !1
},
gapX: {
type: Number,
default: 0
},
gapY: {
type: Number,
default: 0
},
opacity: {
type: Number,
default: 0.3
}
},
setup(t) {
const e = t, n = h(""), i = h(""), d = {
transformOrigin: "center",
transform: `rotate(${e.rotate}deg)`
}, f = e.width + e.gapX, w = e.height + e.gapY, v = (r) => {
const a = document.createElement("canvas"), l = new Image();
l.crossOrigin = "anonymous", l.referrerPolicy = "no-referrer", l.onload = () => {
a.width = l.naturalWidth, a.height = l.naturalHeight;
const c = a.getContext("2d");
c == null || c.drawImage(l, 0, 0), n.value = a.toDataURL();
}, l.src = r;
}, y = (r) => {
const a = new Blob([r], {
type: "image/svg+xml"
});
return URL.createObjectURL(a);
};
x(() => {
e.image && v(e.image);
});
const s = h(null);
return k(
() => [
n.value,
e.content,
e.textColor,
e.height,
e.width,
e.rotate,
e.gapX,
e.gapY
],
() => {
p(() => {
s.value && (i.value && URL.revokeObjectURL(i.value), i.value = y(s.value.innerHTML));
});
},
{
immediate: !0
}
), (r, a) => (o(), g("div", {
class: b(["uv-water-mark", t.full ? "uv-water-mark-full" : ""]),
style: u({ backgroundImage: `url(${i.value})` })
}, [
m("div", {
class: "uv-water-mark-warp",
ref_key: "svgElRef",
ref: s
}, [
(o(), g("svg", {
viewBox: `0 0 ${f} ${w}`,
width: f,
height: w,
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
style: u({
padding: `0 ${t.gapX}px ${t.gapY}px 0`,
opacity: t.opacity
})
}, [
t.image ? (o(), g("image", {
key: 0,
href: n.value,
"xlink:href": n.value,
x: "0",
y: "0",
width: t.width,
height: t.height,
style: d
}, null, 8, N)) : (o(), g("foreignObject", {
key: 1,
x: "0",
y: "0",
width: t.width,
height: t.height
}, [
m("div", {
xmlns: "http://www.w3.org/1999/xhtml",
style: d
}, [
B(r.$slots, "default", {}, () => [
m("span", {
style: u({ color: t.textColor })
}, S(t.content), 5)
])
])
], 8, R))
], 12, U))
], 512)
], 6));
}
});
export {
O as default
};