tdesign-vue
Version:
222 lines (216 loc) • 8.48 kB
JavaScript
/**
* tdesign v1.15.0
* (c) 2026 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var VueCompositionAPI = require('@vue/composition-api');
var _common_js_watermark_generateBase64Url = require('../_common/js/watermark/generateBase64Url.js');
var _common_js_watermark_randomMovingStyle = require('../_common/js/watermark/randomMovingStyle.js');
var _common_js_utils_injectStyle = require('../_common/js/utils/injectStyle.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_tnode = require('../hooks/tnode.js');
var watermark_hooks = require('./hooks.js');
var watermark_props = require('./props.js');
var _common_js_utils_setStyle = require('../_common/js/utils/setStyle.js');
var hooks_useVariables = require('../hooks/useVariables.js');
require('@babel/runtime/helpers/defineProperty');
require('../config-provider/useConfig.js');
require('../_chunks/dep-8eddb350.js');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');
require('../_chunks/dep-0c37520c.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-c13dcbfd.js');
require('dayjs');
require('../_chunks/dep-6f4e680e.js');
require('../_chunks/dep-bb0ececf.js');
require('../_chunks/dep-3b2292ce.js');
require('../_chunks/dep-ba7f5924.js');
require('../_chunks/dep-10fcb46d.js');
require('../_chunks/dep-6eba4d23.js');
require('../_chunks/dep-010db548.js');
require('../_chunks/dep-8d206316.js');
require('../_chunks/dep-2bc87cc8.js');
require('../_chunks/dep-f77d6ad5.js');
require('../_chunks/dep-9dae8101.js');
require('../_chunks/dep-7c84d9a0.js');
require('../_chunks/dep-733a2279.js');
require('../_chunks/dep-d844c9ed.js');
require('../_chunks/dep-c05a9033.js');
require('../_chunks/dep-efe55b82.js');
require('../_chunks/dep-7da70ee1.js');
require('../_chunks/dep-124386d4.js');
require('../_chunks/dep-f5b14344.js');
require('../_chunks/dep-36c2788b.js');
require('../_chunks/dep-fa353fbb.js');
require('../_chunks/dep-d66ab3a4.js');
require('../_chunks/dep-d4d8c513.js');
require('../_common/js/global-config/t.js');
require('@babel/runtime/helpers/slicedToArray');
require('../_chunks/dep-a2217d56.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-9c5b91d3.js');
require('../_chunks/dep-9a74c2be.js');
require('../_chunks/dep-689d381f.js');
require('../_chunks/dep-803744d9.js');
require('../_chunks/dep-84027b7f.js');
require('../_chunks/dep-49400b00.js');
require('../_chunks/dep-f1081d8e.js');
require('../_chunks/dep-2c592e99.js');
require('../_chunks/dep-812bd25d.js');
require('../_chunks/dep-82ce56ef.js');
require('../_chunks/dep-4e96e31a.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('../_common/js/utils/getColorTokenColor.js');
require('../_common/js/common.js');
require('../hooks/useMutationObservable.js');
require('../_chunks/dep-97fef2be.js');
require('../_chunks/dep-0b47afa3.js');
require('../_chunks/dep-d7516e38.js');
require('../_chunks/dep-74be1050.js');
require('../_chunks/dep-7fbd94e9.js');
require('../_chunks/dep-56f568d3.js');
require('../_chunks/dep-ee4e645f.js');
require('../_chunks/dep-0ea9f257.js');
var _Watermark = VueCompositionAPI.defineComponent({
name: "TWatermark",
props: watermark_props["default"],
setup: function setup(props2) {
var backgroundImage = VueCompositionAPI.ref("");
var watermarkRef = VueCompositionAPI.ref();
var watermarkContentRef = VueCompositionAPI.ref();
var parent = VueCompositionAPI.ref();
var gapX = VueCompositionAPI.computed(function () {
return props2.movable ? 0 : props2.x;
});
var gapY = VueCompositionAPI.computed(function () {
return props2.movable ? 0 : props2.y;
});
var rotate = VueCompositionAPI.computed(function () {
return props2.movable ? 0 : props2.rotate;
});
var backgroundRepeat = VueCompositionAPI.computed(function () {
if (props2.movable) {
return "no-repeat";
}
return props2.isRepeat ? "repeat" : "no-repeat";
});
var offsetLeft = VueCompositionAPI.computed(function () {
var _props2$offset;
return ((_props2$offset = props2.offset) === null || _props2$offset === void 0 ? void 0 : _props2$offset[0]) || gapX.value / 2;
});
var offsetTop = VueCompositionAPI.computed(function () {
var _props2$offset2;
return ((_props2$offset2 = props2.offset) === null || _props2$offset2 === void 0 ? void 0 : _props2$offset2[1]) || gapY.value / 2;
});
var _useVariables = hooks_useVariables.useVariables({
fontColor: "--td-text-color-watermark"
}),
fontColor = _useVariables.fontColor;
var bgImageOptions = VueCompositionAPI.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() {
_common_js_watermark_generateBase64Url["default"](bgImageOptions.value, function (base64Url, backgroundSize) {
var _watermarkRef$value;
removeWaterMark();
backgroundImage.value = base64Url;
watermarkContentRef.value = document.createElement("div");
_common_js_utils_setStyle["default"](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 = _common_js_watermark_randomMovingStyle["default"]();
_common_js_utils_injectStyle["default"](keyframesStyle);
}
};
VueCompositionAPI.watch(function () {
return [props2, fontColor.value];
}, injectWaterMark, {
deep: true
});
VueCompositionAPI.onMounted(function () {
injectWaterMark();
watermark_hooks.useMutationObserver(parent.value, function (mutations) {
if (props2.removable) return;
mutations.forEach(function (mutation) {
if (mutation.type === "childList") {
var removeNodes = mutation.removedNodes;
removeNodes.forEach(function (node) {
var element = node;
if (element === watermarkRef.value) {
parent.value.appendChild(element);
}
if (element === watermarkContentRef.value) {
watermarkRef.value.appendChild(element);
}
});
}
});
}, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
});
return {
gapX: gapX,
gapY: gapY,
backgroundRepeat: backgroundRepeat,
backgroundImage: backgroundImage,
watermarkRef: watermarkRef,
watermarkContentRef: watermarkContentRef
};
},
render: function render() {
var h = arguments[0];
var COMPONENT_NAME = hooks_useConfig.usePrefixClass("watermark");
var renderContent = hooks_tnode.useContent();
return h("div", {
"style": {
position: "relative",
overflow: "hidden",
width: "100%"
},
"class": COMPONENT_NAME.value,
"ref": "watermarkRef"
}, [renderContent("default", "content")]);
}
});
exports["default"] = _Watermark;
//# sourceMappingURL=watermark.js.map