tdesign-mobile-vue
Version:
tdesign-mobile-vue
169 lines (165 loc) • 7.33 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
import { defineComponent, ref, shallowRef, reactive, computed, onMounted, watch, createVNode } from 'vue';
import generateBase64Url from '../_common/js/watermark/generateBase64Url.js';
import randomMovingStyle from '../_common/js/watermark/randomMovingStyle.js';
import injectStyle from '../_common/js/utils/injectStyle.js';
import setStyle from '../_common/js/utils/setStyle.js';
import { useMutationObserver } from './hooks/index.js';
import config from '../config.js';
import props from './props.js';
import { useVariables } from '../hooks/useVariables.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useContent } from '../hooks/tnode.js';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash-es';
import '../_common/js/common.js';
import '../_common/js/utils/getColorTokenColor.js';
import '../hooks/useMutationObservable.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-4412ff17.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-8e82f508.js';
import 'dayjs';
import '../hooks/render-tnode.js';
import '../_common/js/utils/general.js';
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var prefix = config.prefix;
var _Watermark = defineComponent({
name: "".concat(prefix, "-watermark"),
props: props,
setup: function setup(props2) {
var backgroundImage = ref("");
var watermarkRef = shallowRef();
var watermarkContentRef = shallowRef();
var offset = reactive(props2.offset || []);
var gapX = computed(function () {
return props2.movable ? 0 : props2.x;
});
var gapY = computed(function () {
return props2.movable ? 0 : props2.y;
});
var rotate = computed(function () {
return props2.movable ? 0 : props2.rotate;
});
var backgroundRepeat = computed(function () {
if (props2.movable) {
return "no-repeat";
}
return props2.isRepeat ? "repeat" : "no-repeat";
});
var offsetLeft = computed(function () {
return offset[0] || gapX.value / 2;
});
var offsetTop = computed(function () {
return offset[1] || gapY.value / 2;
});
var _useVariables = useVariables({
fontColor: "--td-text-color-watermark"
}),
fontColor = _useVariables.fontColor;
var bgImageOptions = computed(function () {
return {
width: props2.width,
height: props2.height,
rotate: rotate.value,
lineSpace: props2.lineSpace,
alpha: props2.alpha,
gapX: gapX.value,
gapY: gapY.value,
watermarkContent: props2.watermarkContent,
offsetLeft: offsetLeft.value,
offsetTop: offsetTop.value,
fontColor: fontColor.value,
layout: props2.layout
};
});
var removeWaterMark = function removeWaterMark() {
if (!watermarkContentRef.value) return;
watermarkContentRef.value.remove();
watermarkContentRef.value = null;
};
var injectWaterMark = function injectWaterMark() {
generateBase64Url(bgImageOptions.value, function (base64Url, backgroundSize) {
var _watermarkRef$value;
removeWaterMark();
backgroundImage.value = base64Url;
watermarkContentRef.value = document.createElement("div");
setStyle(watermarkContentRef.value, {
zIndex: props2.zIndex,
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
width: "100%",
height: "100%",
backgroundSize: "".concat((backgroundSize === null || backgroundSize === void 0 ? void 0 : backgroundSize.width) || gapX.value + props2.width, "px"),
pointerEvents: "none",
backgroundRepeat: backgroundRepeat.value,
backgroundImage: "url('".concat(backgroundImage.value, "')"),
animation: props2.movable ? "watermark infinite ".concat(props2.moveInterval * 4 / 60, "s") : "none"
});
(_watermarkRef$value = watermarkRef.value) === null || _watermarkRef$value === void 0 || _watermarkRef$value.append(watermarkContentRef.value);
});
if (props2.movable) {
var keyframesStyle = randomMovingStyle();
injectStyle(keyframesStyle);
}
};
onMounted(function () {
injectWaterMark();
useMutationObserver(watermarkRef.value, function (mutations) {
if (props2.removable || !watermarkContentRef.value) return;
var _iterator = _createForOfIteratorHelper(mutations),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var mutation = _step.value;
var isRemoved = Array.from(mutation.removedNodes).includes(watermarkContentRef.value);
var isModified = mutation.type === "attributes" && watermarkContentRef.value === mutation.target;
if (isRemoved || isModified) {
injectWaterMark();
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
});
watch(function () {
return [props2, fontColor.value];
}, injectWaterMark, {
deep: true,
flush: "post"
});
return function () {
var COMPONENT_NAME = usePrefixClass("watermark");
var renderContent = useContent();
return createVNode("div", {
"class": COMPONENT_NAME.value,
"ref": watermarkRef
}, [renderContent("default", "content")]);
};
}
});
export { _Watermark as default };
//# sourceMappingURL=watermark.js.map