w-vue3-watermark 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -0
- package/demo.html +1 -0
- package/package.json +12 -0
- package/watermark.common.js +228 -0
- package/watermark.common.js.map +1 -0
- package/watermark.umd.js +274 -0
- package/watermark.umd.js.map +1 -0
- package/watermark.umd.min.js +2 -0
- package/watermark.umd.min.js.map +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
### vue3 水印使用
|
|
4
|
+
|
|
5
|
+
#### 安装
|
|
6
|
+
```
|
|
7
|
+
npm i w-vue3-watermark
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
#### 使用
|
|
11
|
+
```
|
|
12
|
+
import watermark from 'w-vue3-watermark'
|
|
13
|
+
Vue.use(watermark)
|
|
14
|
+
|
|
15
|
+
<watermark
|
|
16
|
+
waterName="水印名字"
|
|
17
|
+
waterFontSize="水印字体大小"
|
|
18
|
+
waterFontColor="水印字体颜色"
|
|
19
|
+
waterFontFamily="水印字体"
|
|
20
|
+
waterGap="水印重复的间隔"
|
|
21
|
+
waterRotate="水印倾斜"
|
|
22
|
+
>
|
|
23
|
+
<div>要加水印内容</div>
|
|
24
|
+
</watermark>
|
|
25
|
+
```
|
package/demo.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<!doctype html><meta charset="utf-8"><title>watermark demo</title><script src="./watermark.umd.js"></script><link rel="stylesheet" href="./watermark.css"><script>console.log(watermark)</script>
|
package/package.json
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
/******/ (function() { // webpackBootstrap
|
|
2
|
+
/******/ "use strict";
|
|
3
|
+
/******/ // The require scope
|
|
4
|
+
/******/ var __webpack_require__ = {};
|
|
5
|
+
/******/
|
|
6
|
+
/************************************************************************/
|
|
7
|
+
/******/ /* webpack/runtime/define property getters */
|
|
8
|
+
/******/ !function() {
|
|
9
|
+
/******/ // define getter functions for harmony exports
|
|
10
|
+
/******/ __webpack_require__.d = function(exports, definition) {
|
|
11
|
+
/******/ for(var key in definition) {
|
|
12
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
13
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
14
|
+
/******/ }
|
|
15
|
+
/******/ }
|
|
16
|
+
/******/ };
|
|
17
|
+
/******/ }();
|
|
18
|
+
/******/
|
|
19
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
20
|
+
/******/ !function() {
|
|
21
|
+
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
|
|
22
|
+
/******/ }();
|
|
23
|
+
/******/
|
|
24
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
25
|
+
/******/ !function() {
|
|
26
|
+
/******/ // define __esModule on exports
|
|
27
|
+
/******/ __webpack_require__.r = function(exports) {
|
|
28
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
29
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
30
|
+
/******/ }
|
|
31
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
32
|
+
/******/ };
|
|
33
|
+
/******/ }();
|
|
34
|
+
/******/
|
|
35
|
+
/******/ /* webpack/runtime/publicPath */
|
|
36
|
+
/******/ !function() {
|
|
37
|
+
/******/ __webpack_require__.p = "";
|
|
38
|
+
/******/ }();
|
|
39
|
+
/******/
|
|
40
|
+
/************************************************************************/
|
|
41
|
+
var __webpack_exports__ = {};
|
|
42
|
+
// ESM COMPAT FLAG
|
|
43
|
+
__webpack_require__.r(__webpack_exports__);
|
|
44
|
+
|
|
45
|
+
// EXPORTS
|
|
46
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
47
|
+
"default": function() { return /* binding */ entry_lib; }
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
|
|
51
|
+
/* eslint-disable no-var */
|
|
52
|
+
// This file is imported into lib/wc client bundles.
|
|
53
|
+
|
|
54
|
+
if (typeof window !== 'undefined') {
|
|
55
|
+
var currentScript = window.document.currentScript
|
|
56
|
+
if (false) { var getCurrentScript; }
|
|
57
|
+
|
|
58
|
+
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
|
|
59
|
+
if (src) {
|
|
60
|
+
__webpack_require__.p = src[1] // eslint-disable-line
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Indicate to webpack that this file can be concatenated
|
|
65
|
+
/* harmony default export */ var setPublicPath = (null);
|
|
66
|
+
|
|
67
|
+
;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
|
|
68
|
+
var external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
|
|
69
|
+
;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
|
|
70
|
+
|
|
71
|
+
function useWatermarkBg(props) {
|
|
72
|
+
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
|
|
73
|
+
// 创建一个 canvas
|
|
74
|
+
const canvas = document.createElement('canvas');
|
|
75
|
+
const devicePixelRatio = window.devicePixelRatio || 1;
|
|
76
|
+
// 设置字体大小
|
|
77
|
+
const fontSize = props.waterFontSize * devicePixelRatio;
|
|
78
|
+
const font = fontSize + 'px ' + props.waterFontFamily;
|
|
79
|
+
const ctx = canvas.getContext('2d');
|
|
80
|
+
// 获取文字宽度
|
|
81
|
+
ctx.font = font;
|
|
82
|
+
const {
|
|
83
|
+
width
|
|
84
|
+
} = ctx.measureText(props.waterName);
|
|
85
|
+
const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;
|
|
86
|
+
canvas.width = canvasSize;
|
|
87
|
+
canvas.height = canvasSize;
|
|
88
|
+
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
89
|
+
// 旋转 45 度让文字变倾斜
|
|
90
|
+
ctx.rotate(Math.PI / 180 * -props.waterRotate);
|
|
91
|
+
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
|
|
92
|
+
ctx.font = font;
|
|
93
|
+
ctx.textAlign = 'center';
|
|
94
|
+
ctx.textBaseline = 'middle';
|
|
95
|
+
// 将文字画出来
|
|
96
|
+
ctx.fillText(props.waterName, 0, 0);
|
|
97
|
+
return {
|
|
98
|
+
base64: canvas.toDataURL(),
|
|
99
|
+
size: canvasSize,
|
|
100
|
+
styleSize: canvasSize / devicePixelRatio
|
|
101
|
+
};
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
/* harmony default export */ var water_markvue_type_script_setup_true_lang_js = ({
|
|
109
|
+
__name: 'index',
|
|
110
|
+
props: {
|
|
111
|
+
waterName: {
|
|
112
|
+
// 传入水印的文本
|
|
113
|
+
type: String,
|
|
114
|
+
required: true,
|
|
115
|
+
default: "watermark"
|
|
116
|
+
},
|
|
117
|
+
waterFontSize: {
|
|
118
|
+
// 字体的大小
|
|
119
|
+
type: Number,
|
|
120
|
+
default: 14
|
|
121
|
+
},
|
|
122
|
+
waterGap: {
|
|
123
|
+
// 水印重复的间隔
|
|
124
|
+
type: Number,
|
|
125
|
+
default: 20
|
|
126
|
+
},
|
|
127
|
+
waterRotate: {
|
|
128
|
+
// 水印倾斜
|
|
129
|
+
type: Number,
|
|
130
|
+
default: 45
|
|
131
|
+
},
|
|
132
|
+
waterFontFamily: {
|
|
133
|
+
// 水印字体
|
|
134
|
+
type: String,
|
|
135
|
+
default: "Microsoft Yahei"
|
|
136
|
+
},
|
|
137
|
+
waterFontColor: {
|
|
138
|
+
// 水印字体颜色
|
|
139
|
+
type: String,
|
|
140
|
+
default: "rgba(0, 0, 0, 0.3)"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
setup(__props) {
|
|
144
|
+
const props = __props;
|
|
145
|
+
const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 挂载的dom节点
|
|
146
|
+
const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 水印节点
|
|
147
|
+
const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 监听器
|
|
148
|
+
const bg = useWatermarkBg(props); // 水印参数
|
|
149
|
+
const {
|
|
150
|
+
base64,
|
|
151
|
+
styleSize
|
|
152
|
+
} = bg.value;
|
|
153
|
+
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
|
|
154
|
+
addDom();
|
|
155
|
+
|
|
156
|
+
// 添加dom监控器
|
|
157
|
+
k.value = new MutationObserver(records => {
|
|
158
|
+
for (const record of records) {
|
|
159
|
+
for (const dom of record.removedNodes) {
|
|
160
|
+
if (dom === div.value) {
|
|
161
|
+
div.value.remove();
|
|
162
|
+
addDom();
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
if (record.target === div.value) {
|
|
167
|
+
div.value.remove();
|
|
168
|
+
addDom();
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
k.value.observe(watermarkContainer.value, {
|
|
174
|
+
childList: true,
|
|
175
|
+
attributes: true,
|
|
176
|
+
subtree: true
|
|
177
|
+
});
|
|
178
|
+
});
|
|
179
|
+
const addDom = () => {
|
|
180
|
+
div.value = document.createElement("div");
|
|
181
|
+
div.value.style.backgroundImage = `url(${base64})`;
|
|
182
|
+
div.value.style.inset = 0;
|
|
183
|
+
div.value.style.zIndex = 9999;
|
|
184
|
+
div.value.style.position = "absolute";
|
|
185
|
+
div.value.style.backgroundRepeat = "repeat";
|
|
186
|
+
div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;
|
|
187
|
+
div.value.style.pointerEvents = "none";
|
|
188
|
+
watermarkContainer.value.appendChild(div.value);
|
|
189
|
+
};
|
|
190
|
+
return (_ctx, _cache) => {
|
|
191
|
+
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
|
|
192
|
+
class: "watermark-container",
|
|
193
|
+
ref_key: "watermarkContainer",
|
|
194
|
+
ref: watermarkContainer
|
|
195
|
+
}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 512);
|
|
196
|
+
};
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
|
|
200
|
+
|
|
201
|
+
;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
const __exports__ = water_markvue_type_script_setup_true_lang_js;
|
|
206
|
+
|
|
207
|
+
/* harmony default export */ var water_mark = (__exports__);
|
|
208
|
+
;// CONCATENATED MODULE: ./src/packages/index.js
|
|
209
|
+
|
|
210
|
+
const components = [water_mark];
|
|
211
|
+
|
|
212
|
+
// 注册组件
|
|
213
|
+
const install = function (Vue) {
|
|
214
|
+
components.forEach(k => {
|
|
215
|
+
Vue.component(k.name, k);
|
|
216
|
+
});
|
|
217
|
+
};
|
|
218
|
+
/* harmony default export */ var src_packages = (install);
|
|
219
|
+
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
/* harmony default export */ var entry_lib = (src_packages);
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
module.exports = __webpack_exports__;
|
|
226
|
+
/******/ })()
|
|
227
|
+
;
|
|
228
|
+
//# sourceMappingURL=watermark.common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"watermark.common.js","mappings":"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","sources":["webpack://vue3-watermark/webpack/bootstrap","webpack://vue3-watermark/webpack/runtime/define property getters","webpack://vue3-watermark/webpack/runtime/hasOwnProperty shorthand","webpack://vue3-watermark/webpack/runtime/make namespace object","webpack://vue3-watermark/webpack/runtime/publicPath","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue3-watermark/external commonjs2 {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://vue3-watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://vue3-watermark/./src/packages/water-mark/index.vue","webpack://vue3-watermark/./src/packages/water-mark/index.vue?e80c","webpack://vue3-watermark/./src/packages/water-mark/index.vue?ba69","webpack://vue3-watermark/./src/packages/index.js","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n var currentScript = window.document.currentScript\n if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n var getCurrentScript = require('@soda/get-current-script')\n currentScript = getCurrentScript()\n\n // for backward compatibility, because previously we directly included the polyfill\n if (!('currentScript' in document)) {\n Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n }\n }\n\n var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n if (src) {\n __webpack_public_path__ = src[1] // eslint-disable-line\n }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"vue\");","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 14,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(0, 0, 0, 0.3)\",\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","textAlign","textBaseline","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component","name"],"sourceRoot":""}
|
package/watermark.umd.js
ADDED
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
(function webpackUniversalModuleDefinition(root, factory) {
|
|
2
|
+
if(typeof exports === 'object' && typeof module === 'object')
|
|
3
|
+
module.exports = factory(require("vue"));
|
|
4
|
+
else if(typeof define === 'function' && define.amd)
|
|
5
|
+
define([], factory);
|
|
6
|
+
else if(typeof exports === 'object')
|
|
7
|
+
exports["watermark"] = factory(require("vue"));
|
|
8
|
+
else
|
|
9
|
+
root["watermark"] = factory(root["Vue"]);
|
|
10
|
+
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {
|
|
11
|
+
return /******/ (function() { // webpackBootstrap
|
|
12
|
+
/******/ "use strict";
|
|
13
|
+
/******/ var __webpack_modules__ = ({
|
|
14
|
+
|
|
15
|
+
/***/ 274:
|
|
16
|
+
/***/ (function(module) {
|
|
17
|
+
|
|
18
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__274__;
|
|
19
|
+
|
|
20
|
+
/***/ })
|
|
21
|
+
|
|
22
|
+
/******/ });
|
|
23
|
+
/************************************************************************/
|
|
24
|
+
/******/ // The module cache
|
|
25
|
+
/******/ var __webpack_module_cache__ = {};
|
|
26
|
+
/******/
|
|
27
|
+
/******/ // The require function
|
|
28
|
+
/******/ function __webpack_require__(moduleId) {
|
|
29
|
+
/******/ // Check if module is in cache
|
|
30
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
31
|
+
/******/ if (cachedModule !== undefined) {
|
|
32
|
+
/******/ return cachedModule.exports;
|
|
33
|
+
/******/ }
|
|
34
|
+
/******/ // Create a new module (and put it into the cache)
|
|
35
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
36
|
+
/******/ // no module.id needed
|
|
37
|
+
/******/ // no module.loaded needed
|
|
38
|
+
/******/ exports: {}
|
|
39
|
+
/******/ };
|
|
40
|
+
/******/
|
|
41
|
+
/******/ // Execute the module function
|
|
42
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
43
|
+
/******/
|
|
44
|
+
/******/ // Return the exports of the module
|
|
45
|
+
/******/ return module.exports;
|
|
46
|
+
/******/ }
|
|
47
|
+
/******/
|
|
48
|
+
/************************************************************************/
|
|
49
|
+
/******/ /* webpack/runtime/define property getters */
|
|
50
|
+
/******/ !function() {
|
|
51
|
+
/******/ // define getter functions for harmony exports
|
|
52
|
+
/******/ __webpack_require__.d = function(exports, definition) {
|
|
53
|
+
/******/ for(var key in definition) {
|
|
54
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
55
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
56
|
+
/******/ }
|
|
57
|
+
/******/ }
|
|
58
|
+
/******/ };
|
|
59
|
+
/******/ }();
|
|
60
|
+
/******/
|
|
61
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
62
|
+
/******/ !function() {
|
|
63
|
+
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
|
|
64
|
+
/******/ }();
|
|
65
|
+
/******/
|
|
66
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
67
|
+
/******/ !function() {
|
|
68
|
+
/******/ // define __esModule on exports
|
|
69
|
+
/******/ __webpack_require__.r = function(exports) {
|
|
70
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
71
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
72
|
+
/******/ }
|
|
73
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
74
|
+
/******/ };
|
|
75
|
+
/******/ }();
|
|
76
|
+
/******/
|
|
77
|
+
/******/ /* webpack/runtime/publicPath */
|
|
78
|
+
/******/ !function() {
|
|
79
|
+
/******/ __webpack_require__.p = "";
|
|
80
|
+
/******/ }();
|
|
81
|
+
/******/
|
|
82
|
+
/************************************************************************/
|
|
83
|
+
var __webpack_exports__ = {};
|
|
84
|
+
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
|
|
85
|
+
!function() {
|
|
86
|
+
// ESM COMPAT FLAG
|
|
87
|
+
__webpack_require__.r(__webpack_exports__);
|
|
88
|
+
|
|
89
|
+
// EXPORTS
|
|
90
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
91
|
+
"default": function() { return /* binding */ entry_lib; }
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
|
|
95
|
+
/* eslint-disable no-var */
|
|
96
|
+
// This file is imported into lib/wc client bundles.
|
|
97
|
+
|
|
98
|
+
if (typeof window !== 'undefined') {
|
|
99
|
+
var currentScript = window.document.currentScript
|
|
100
|
+
if (false) { var getCurrentScript; }
|
|
101
|
+
|
|
102
|
+
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
|
|
103
|
+
if (src) {
|
|
104
|
+
__webpack_require__.p = src[1] // eslint-disable-line
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Indicate to webpack that this file can be concatenated
|
|
109
|
+
/* harmony default export */ var setPublicPath = (null);
|
|
110
|
+
|
|
111
|
+
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
|
|
112
|
+
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(274);
|
|
113
|
+
;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
|
|
114
|
+
|
|
115
|
+
function useWatermarkBg(props) {
|
|
116
|
+
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
|
|
117
|
+
// 创建一个 canvas
|
|
118
|
+
const canvas = document.createElement('canvas');
|
|
119
|
+
const devicePixelRatio = window.devicePixelRatio || 1;
|
|
120
|
+
// 设置字体大小
|
|
121
|
+
const fontSize = props.waterFontSize * devicePixelRatio;
|
|
122
|
+
const font = fontSize + 'px ' + props.waterFontFamily;
|
|
123
|
+
const ctx = canvas.getContext('2d');
|
|
124
|
+
// 获取文字宽度
|
|
125
|
+
ctx.font = font;
|
|
126
|
+
const {
|
|
127
|
+
width
|
|
128
|
+
} = ctx.measureText(props.waterName);
|
|
129
|
+
const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;
|
|
130
|
+
canvas.width = canvasSize;
|
|
131
|
+
canvas.height = canvasSize;
|
|
132
|
+
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
133
|
+
// 旋转 45 度让文字变倾斜
|
|
134
|
+
ctx.rotate(Math.PI / 180 * -props.waterRotate);
|
|
135
|
+
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
|
|
136
|
+
ctx.font = font;
|
|
137
|
+
ctx.textAlign = 'center';
|
|
138
|
+
ctx.textBaseline = 'middle';
|
|
139
|
+
// 将文字画出来
|
|
140
|
+
ctx.fillText(props.waterName, 0, 0);
|
|
141
|
+
return {
|
|
142
|
+
base64: canvas.toDataURL(),
|
|
143
|
+
size: canvasSize,
|
|
144
|
+
styleSize: canvasSize / devicePixelRatio
|
|
145
|
+
};
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
/* harmony default export */ var water_markvue_type_script_setup_true_lang_js = ({
|
|
153
|
+
__name: 'index',
|
|
154
|
+
props: {
|
|
155
|
+
waterName: {
|
|
156
|
+
// 传入水印的文本
|
|
157
|
+
type: String,
|
|
158
|
+
required: true,
|
|
159
|
+
default: "watermark"
|
|
160
|
+
},
|
|
161
|
+
waterFontSize: {
|
|
162
|
+
// 字体的大小
|
|
163
|
+
type: Number,
|
|
164
|
+
default: 14
|
|
165
|
+
},
|
|
166
|
+
waterGap: {
|
|
167
|
+
// 水印重复的间隔
|
|
168
|
+
type: Number,
|
|
169
|
+
default: 20
|
|
170
|
+
},
|
|
171
|
+
waterRotate: {
|
|
172
|
+
// 水印倾斜
|
|
173
|
+
type: Number,
|
|
174
|
+
default: 45
|
|
175
|
+
},
|
|
176
|
+
waterFontFamily: {
|
|
177
|
+
// 水印字体
|
|
178
|
+
type: String,
|
|
179
|
+
default: "Microsoft Yahei"
|
|
180
|
+
},
|
|
181
|
+
waterFontColor: {
|
|
182
|
+
// 水印字体颜色
|
|
183
|
+
type: String,
|
|
184
|
+
default: "rgba(0, 0, 0, 0.3)"
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
setup(__props) {
|
|
188
|
+
const props = __props;
|
|
189
|
+
const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 挂载的dom节点
|
|
190
|
+
const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 水印节点
|
|
191
|
+
const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 监听器
|
|
192
|
+
const bg = useWatermarkBg(props); // 水印参数
|
|
193
|
+
const {
|
|
194
|
+
base64,
|
|
195
|
+
styleSize
|
|
196
|
+
} = bg.value;
|
|
197
|
+
(0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
|
|
198
|
+
addDom();
|
|
199
|
+
|
|
200
|
+
// 添加dom监控器
|
|
201
|
+
k.value = new MutationObserver(records => {
|
|
202
|
+
for (const record of records) {
|
|
203
|
+
for (const dom of record.removedNodes) {
|
|
204
|
+
if (dom === div.value) {
|
|
205
|
+
div.value.remove();
|
|
206
|
+
addDom();
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
if (record.target === div.value) {
|
|
211
|
+
div.value.remove();
|
|
212
|
+
addDom();
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
});
|
|
217
|
+
k.value.observe(watermarkContainer.value, {
|
|
218
|
+
childList: true,
|
|
219
|
+
attributes: true,
|
|
220
|
+
subtree: true
|
|
221
|
+
});
|
|
222
|
+
});
|
|
223
|
+
const addDom = () => {
|
|
224
|
+
div.value = document.createElement("div");
|
|
225
|
+
div.value.style.backgroundImage = `url(${base64})`;
|
|
226
|
+
div.value.style.inset = 0;
|
|
227
|
+
div.value.style.zIndex = 9999;
|
|
228
|
+
div.value.style.position = "absolute";
|
|
229
|
+
div.value.style.backgroundRepeat = "repeat";
|
|
230
|
+
div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;
|
|
231
|
+
div.value.style.pointerEvents = "none";
|
|
232
|
+
watermarkContainer.value.appendChild(div.value);
|
|
233
|
+
};
|
|
234
|
+
return (_ctx, _cache) => {
|
|
235
|
+
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
|
|
236
|
+
class: "watermark-container",
|
|
237
|
+
ref_key: "watermarkContainer",
|
|
238
|
+
ref: watermarkContainer
|
|
239
|
+
}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 512);
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
|
|
244
|
+
|
|
245
|
+
;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
const __exports__ = water_markvue_type_script_setup_true_lang_js;
|
|
250
|
+
|
|
251
|
+
/* harmony default export */ var water_mark = (__exports__);
|
|
252
|
+
;// CONCATENATED MODULE: ./src/packages/index.js
|
|
253
|
+
|
|
254
|
+
const components = [water_mark];
|
|
255
|
+
|
|
256
|
+
// 注册组件
|
|
257
|
+
const install = function (Vue) {
|
|
258
|
+
components.forEach(k => {
|
|
259
|
+
Vue.component(k.name, k);
|
|
260
|
+
});
|
|
261
|
+
};
|
|
262
|
+
/* harmony default export */ var src_packages = (install);
|
|
263
|
+
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
/* harmony default export */ var entry_lib = (src_packages);
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
}();
|
|
270
|
+
/******/ return __webpack_exports__;
|
|
271
|
+
/******/ })()
|
|
272
|
+
;
|
|
273
|
+
});
|
|
274
|
+
//# sourceMappingURL=watermark.umd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"watermark.umd.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?e25b","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n var currentScript = window.document.currentScript\n if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n var getCurrentScript = require('@soda/get-current-script')\n currentScript = getCurrentScript()\n\n // for backward compatibility, because previously we directly included the polyfill\n if (!('currentScript' in document)) {\n Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n }\n }\n\n var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n if (src) {\n __webpack_public_path__ = src[1] // eslint-disable-line\n }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 14,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(0, 0, 0, 0.3)\",\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","textAlign","textBaseline","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component","name"],"sourceRoot":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["watermark"]=t(require("vue")):e["watermark"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={274:function(t){t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}!function(){n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){n.p=""}();var o={};return function(){if(n.r(o),n.d(o,{default:function(){return s}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(n.p=t[1])}var r=n(274);function a(e){return(0,r.computed)((()=>{const t=document.createElement("canvas"),r=window.devicePixelRatio||1,n=e.waterFontSize*r,o=n+"px "+e.waterFontFamily,a=t.getContext("2d");a.font=o;const{width:u}=a.measureText(e.waterName),i=Math.max(100,u)+e.waterGap*r;return t.width=i,t.height=i,a.translate(t.width/2,t.height/2),a.rotate(Math.PI/180*-e.waterRotate),a.fillStyle="rgba(0, 0, 0, 0.3)",a.font=o,a.textAlign="center",a.textBaseline="middle",a.fillText(e.waterName,0,0),{base64:t.toDataURL(),size:i,styleSize:i/r}}))}var u={__name:"index",props:{waterName:{type:String,required:!0,default:"watermark"},waterFontSize:{type:Number,default:14},waterGap:{type:Number,default:20},waterRotate:{type:Number,default:45},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterFontColor:{type:String,default:"rgba(0, 0, 0, 0.3)"}},setup(e){const t=e,n=(0,r.ref)(null),o=(0,r.ref)(null),u=(0,r.ref)(null),i=a(t),{base64:l,styleSize:f}=i.value;(0,r.onMounted)((()=>{c(),u.value=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)if(e===o.value)return o.value.remove(),void c();if(t.target===o.value)return o.value.remove(),void c()}})),u.value.observe(n.value,{childList:!0,attributes:!0,subtree:!0})}));const c=()=>{o.value=document.createElement("div"),o.value.style.backgroundImage=`url(${l})`,o.value.style.inset=0,o.value.style.zIndex=9999,o.value.style.position="absolute",o.value.style.backgroundRepeat="repeat",o.value.style.backgroundSize=`${f}px ${f}px`,o.value.style.pointerEvents="none",n.value.appendChild(o.value)};return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"watermark-container",ref_key:"watermarkContainer",ref:n},[(0,r.renderSlot)(e.$slots,"default")],512))}};const i=u;var l=i;const f=[l],c=function(e){f.forEach((t=>{e.component(t.name,t)}))};var d=c,s=d}(),o}()}));
|
|
2
|
+
//# sourceMappingURL=watermark.umd.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"watermark.umd.min.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n var currentScript = window.document.currentScript\n if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n var getCurrentScript = require('@soda/get-current-script')\n currentScript = getCurrentScript()\n\n // for backward compatibility, because previously we directly included the polyfill\n if (!('currentScript' in document)) {\n Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n }\n }\n\n var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n if (src) {\n __webpack_public_path__ = src[1] // eslint-disable-line\n }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 14,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(0, 0, 0, 0.3)\",\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__274__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","window","currentScript","document","src","match","useWatermarkBg","props","computed","canvas","createElement","devicePixelRatio","fontSize","waterFontSize","font","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","textAlign","textBaseline","fillText","base64","toDataURL","size","styleSize","__props","watermarkContainer","ref","div","k","bg","onMounted","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","forEach","component","name"],"sourceRoot":""}
|