w-vue3-watermark 1.0.0 → 1.0.3

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.
Files changed (8) hide show
  1. package/README.md +15 -3
  2. package/package.json +2 -2
  3. package/watermark.common.js +5 -3
  4. package/watermark.common.js.map +1 -1
  5. package/watermark.umd.js +5 -3
  6. package/watermark.umd.js.map +1 -1
  7. package/watermark.umd.min.js +1 -1
  8. package/watermark.umd.min.js.map +1 -1
package/README.md CHANGED
@@ -1,13 +1,25 @@
1
1
 
2
2
 
3
- ### vue3 水印使用
3
+ # vue3 水印使用
4
4
 
5
- #### 安装
5
+
6
+ #### 一、安装
6
7
  ```
7
8
  npm i w-vue3-watermark
8
9
  ```
9
10
 
10
- #### 使用
11
+ ### 二、配置
12
+
13
+ |属性名|说明|类型|默认值|
14
+ |-|-|-|-|
15
+ |waterName|水印名字|string|''|
16
+ |waterFontSize|水印字体大小|number|16|
17
+ |waterFontColor|水印字体颜色|string|''|
18
+ |waterFontFamily|水印重复的间隔|number|''|
19
+ |waterGap|水印字体|string|''|
20
+ |waterRotate|水印倾斜|number|''|
21
+
22
+ #### 三、使用
11
23
  ```
12
24
  import watermark from 'w-vue3-watermark'
13
25
  Vue.use(watermark)
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "w-vue3-watermark",
3
- "version": "1.0.0",
3
+ "version": "1.0.3",
4
4
  "description": "",
5
5
  "main": "watermark.common.js",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
8
8
  },
9
- "keywords": ["vue3水印"],
9
+ "keywords": [],
10
10
  "author": "",
11
11
  "license": "ISC"
12
12
  }
package/watermark.common.js CHANGED
@@ -105,8 +105,10 @@ function useWatermarkBg(props) {
105
105
 
106
106
 
107
107
 
108
- /* harmony default export */ var water_markvue_type_script_setup_true_lang_js = ({
109
- __name: 'index',
108
+ const __default__ = {
109
+ name: 'watermark'
110
+ };
111
+ /* harmony default export */ var water_markvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
110
112
  props: {
111
113
  waterName: {
112
114
  // 传入水印的文本
@@ -195,7 +197,7 @@ function useWatermarkBg(props) {
195
197
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 512);
196
198
  };
197
199
  }
198
- });
200
+ }));
199
201
  ;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
200
202
 
201
203
  ;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue
package/watermark.common.js.map CHANGED
@@ -1 +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":""}
1
+ {"version":3,"file":"watermark.common.js","mappings":";;UAAA;UACA;;;;;WCDA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;;;;;;;;;;;;;ACAA;AACA;;AAEA;AACA;AACA,MAAM,KAAuC,EAAE,yBAQ5C;;AAEH;AACA;AACA,IAAI,qBAAuB;AAC3B;AACA;;AAEA;AACA,kDAAe,IAAI;;;ACtBnB,IAAI,4DAA4B;;ACAD;AAChB,SAASC,cAAcA,CAAEC,KAAK,EAAE;EAC7C,OAAOF,yEAAQ,CAAC,MAAM;IACpB;IACA,MAAMG,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IAC/C,MAAMC,gBAAgB,GAAGC,MAAM,CAACD,gBAAgB,IAAI,CAAC;IACrD;IACA,MAAME,QAAQ,GAAGN,KAAK,CAACO,aAAa,GAAGH,gBAAgB;IACvD,MAAMI,IAAI,GAAGF,QAAQ,GAAG,KAAK,GAAGN,KAAK,CAACS,eAAe;IACrD,MAAMC,GAAG,GAAGT,MAAM,CAACU,UAAU,CAAC,IAAI,CAAC;IACnC;IACAD,GAAG,CAACF,IAAI,GAAGA,IAAI;IACf,MAAM;MAAEI;IAAM,CAAC,GAAGF,GAAG,CAACG,WAAW,CAACb,KAAK,CAACc,SAAS,CAAC;IAClD,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAAC,GAAG,EAAEL,KAAK,CAAC,GAAGZ,KAAK,CAACkB,QAAQ,GAAGd,gBAAgB;IAC3EH,MAAM,CAACW,KAAK,GAAGG,UAAU;IACzBd,MAAM,CAACkB,MAAM,GAAGJ,UAAU;IAC1BL,GAAG,CAACU,SAAS,CAACnB,MAAM,CAACW,KAAK,GAAG,CAAC,EAAEX,MAAM,CAACkB,MAAM,GAAG,CAAC,CAAC;IAClD;IACAT,GAAG,CAACW,MAAM,CAAEL,IAAI,CAACM,EAAE,GAAG,GAAG,GAAI,CAAEtB,KAAK,CAACuB,WAAW,CAAC;IACjDb,GAAG,CAACc,SAAS,GAAG,oBAAoB;IACpCd,GAAG,CAACF,IAAI,GAAGA,IAAI;IACfE,GAAG,CAACe,SAAS,GAAG,QAAQ;IACxBf,GAAG,CAACgB,YAAY,GAAG,QAAQ;IAC3B;IACAhB,GAAG,CAACiB,QAAQ,CAAC3B,KAAK,CAACc,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;IACnC,OAAO;MACLc,MAAM,EAAE3B,MAAM,CAAC4B,SAAS,CAAC,CAAC;MAC1BC,IAAI,EAAEf,UAAU;MAChBgB,SAAS,EAAEhB,UAAU,GAAGX;IAC1B,CAAC;EACH,CAAC,CAAC;AACJ;;;ACnBkD;AACD;AAPjD,MAAA8B,WAAA,GAAe;EACbC,IAAI,EAAE;AACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMD,MAAMnC,KAAK,GAAGoC,OAgCZ;IAEF,MAAMC,kBAAkB,GAAGJ,oEAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACtC,MAAMK,GAAG,GAAGL,oEAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACvB,MAAMM,CAAC,GAAGN,oEAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACrB,MAAMO,EAAE,GAAGzC,cAAc,CAACC,KAAK,CAAC,CAAC,CAAC;IAClC,MAAM;MAAE4B,MAAM;MAAEG;IAAU,CAAC,GAAGS,EAAE,CAACC,KAAK;IAEtCT,0EAAS,CAAC,MAAM;MACdU,MAAM,CAAC,CAAC;;MAER;MACAH,CAAC,CAACE,KAAK,GAAG,IAAIE,gBAAgB,CAAEC,OAAO,IAAK;QAC1C,KAAK,MAAMC,MAAM,IAAID,OAAO,EAAE;UAC5B,KAAK,MAAME,GAAG,IAAID,MAAM,CAACE,YAAY,EAAE;YACrC,IAAID,GAAG,KAAKR,GAAG,CAACG,KAAK,EAAE;cACrBH,GAAG,CAACG,KAAK,CAACO,MAAM,CAAC,CAAC;cAClBN,MAAM,CAAC,CAAC;cACR;YACF;UACF;UACA,IAAIG,MAAM,CAACI,MAAM,KAAKX,GAAG,CAACG,KAAK,EAAE;YAC/BH,GAAG,CAACG,KAAK,CAACO,MAAM,CAAC,CAAC;YAClBN,MAAM,CAAC,CAAC;YACR;UACF;QACF;MACF,CAAC,CAAC;MACFH,CAAC,CAACE,KAAK,CAACS,OAAO,CAACb,kBAAkB,CAACI,KAAK,EAAE;QACxCU,SAAS,EAAE,IAAI;QACfC,UAAU,EAAE,IAAI;QAChBC,OAAO,EAAE;MACX,CAAC,CAAC;IACJ,CAAC,CAAC;IACF,MAAMX,MAAM,GAAGA,CAAA,KAAM;MACnBJ,GAAG,CAACG,KAAK,GAAGvC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;MACzCmC,GAAG,CAACG,KAAK,CAACa,KAAK,CAACC,eAAe,GAAI,OAAM3B,MAAO,GAAE;MAClDU,GAAG,CAACG,KAAK,CAACa,KAAK,CAACE,KAAK,GAAG,CAAC;MACzBlB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACG,MAAM,GAAG,IAAI;MAC7BnB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACI,QAAQ,GAAG,UAAU;MACrCpB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACK,gBAAgB,GAAG,QAAQ;MAC3CrB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACM,cAAc,GAAI,GAAE7B,SAAU,MAAKA,SAAU,IAAG;MAChEO,GAAG,CAACG,KAAK,CAACa,KAAK,CAACO,aAAa,GAAG,MAAM;MACtCxB,kBAAkB,CAACI,KAAK,CAACqB,WAAW,CAACxB,GAAG,CAACG,KAAK,CAAC;IACjD,CAAC;;;;;;;;;;;AC1FqQ;;ACAnM;AACL;;AAE9D,oBAAoB,4CAAM;;AAE1B,+CAAe;;ACLgC;AAE/C,MAAMuB,UAAU,GAAG,CAAED,UAAS,CAAE;;AAEhC;AACA,MAAME,OAAO,GAAG,SAAAA,CAAUC,GAAG,EAAE;EAC3BF,UAAU,CAACG,OAAO,CAAE5B,CAAC,IAAK;IACtB2B,GAAG,CAACE,SAAS,CAAC7B,CAAC,CAACJ,IAAI,EAAEI,CAAC,CAAC;EAC5B,CAAC,CAAC;AACN,CAAC;AAED,iDAAe0B,OAAO;;ACXE;AACA;AACxB,8CAAe,YAAG;AACI","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<script>\r\nexport default {\r\n name: 'watermark'\r\n}\r\n</script>\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","__default__","name","__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"],"sourceRoot":""}
package/watermark.umd.js CHANGED
@@ -149,8 +149,10 @@ function useWatermarkBg(props) {
149
149
 
150
150
 
151
151
 
152
- /* harmony default export */ var water_markvue_type_script_setup_true_lang_js = ({
153
- __name: 'index',
152
+ const __default__ = {
153
+ name: 'watermark'
154
+ };
155
+ /* harmony default export */ var water_markvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
154
156
  props: {
155
157
  waterName: {
156
158
  // 传入水印的文本
@@ -239,7 +241,7 @@ function useWatermarkBg(props) {
239
241
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 512);
240
242
  };
241
243
  }
242
- });
244
+ }));
243
245
  ;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
244
246
 
245
247
  ;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue
package/watermark.umd.js.map CHANGED
@@ -1 +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":""}
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<script>\r\nexport default {\r\n name: 'watermark'\r\n}\r\n</script>\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","__default__","name","__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"],"sourceRoot":""}
package/watermark.umd.min.js CHANGED
@@ -1,2 +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}()}));
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 p}}),"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}}))}const u={name:"watermark"};var i=Object.assign(u,{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)((()=>{s(),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 s();if(t.target===o.value)return o.value.remove(),void s()}})),u.value.observe(n.value,{childList:!0,attributes:!0,subtree:!0})}));const s=()=>{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 l=i;var f=l;const s=[f],c=function(e){s.forEach((t=>{e.component(t.name,t)}))};var d=c,p=d}(),o}()}));
2
2
  //# sourceMappingURL=watermark.umd.min.js.map
package/watermark.umd.min.js.map CHANGED
@@ -1 +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":""}
1
+ {"version":3,"file":"watermark.umd.min.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,kBAAZC,SAA0C,kBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,QACR,oBAAXC,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIJ,GACe,kBAAZC,QACdA,QAAQ,aAAeD,EAAQG,QAAQ,QAEvCJ,EAAK,aAAeC,EAAQD,EAAK,OAClC,EATD,CASoB,qBAATO,KAAuBA,KAAOC,MAAO,SAASC,GACzD,O,+CCVAN,EAAOD,QAAUO,C,GCCbC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaX,QAGrB,IAAIC,EAASO,EAAyBE,GAAY,CAGjDV,QAAS,CAAC,GAOX,OAHAa,EAAoBH,GAAUT,EAAQA,EAAOD,QAASS,GAG/CR,EAAOD,OACf,E,WCrBAS,EAAoBK,EAAI,SAASd,EAASe,GACzC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEjB,EAASgB,IAC5EE,OAAOC,eAAenB,EAASgB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAG3E,C,eCPAP,EAAoBQ,EAAI,SAASK,EAAKC,GAAQ,OAAOL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,EAAO,C,eCCtGd,EAAoBkB,EAAI,SAAS3B,GACX,qBAAX4B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAenB,EAAS4B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAenB,EAAS,aAAc,CAAE8B,OAAO,GACvD,C,eCNArB,EAAoBsB,EAAI,E,+BCGxB,G,6CAAsB,qBAAXC,OAAwB,CACjC,IAAIC,EAAgBD,OAAOE,SAASD,cAWhCE,EAAMF,GAAiBA,EAAcE,IAAIC,MAAM,2BAC/CD,IACF,IAA0BA,EAAI,GAElC,CAGA,I,SCrBe,SAASE,EAAgBC,GACtC,OAAOC,EAAAA,EAAAA,WAAS,KAEd,MAAMC,EAASN,SAASO,cAAc,UAChCC,EAAmBV,OAAOU,kBAAoB,EAE9CC,EAAWL,EAAMM,cAAgBF,EACjCG,EAAOF,EAAW,MAAQL,EAAMQ,gBAChCC,EAAMP,EAAOQ,WAAW,MAE9BD,EAAIF,KAAOA,EACX,MAAM,MAAEI,GAAUF,EAAIG,YAAYZ,EAAMa,WAClCC,EAAaC,KAAKC,IAAI,IAAKL,GAASX,EAAMiB,SAAWb,EAY3D,OAXAF,EAAOS,MAAQG,EACfZ,EAAOgB,OAASJ,EAChBL,EAAIU,UAAUjB,EAAOS,MAAQ,EAAGT,EAAOgB,OAAS,GAEhDT,EAAIW,OAAQL,KAAKM,GAAK,KAASrB,EAAMsB,aACrCb,EAAIc,UAAY,qBAChBd,EAAIF,KAAOA,EACXE,EAAIe,UAAY,SAChBf,EAAIgB,aAAe,SAEnBhB,EAAIiB,SAAS1B,EAAMa,UAAW,EAAG,GAC1B,CACLc,OAAQzB,EAAO0B,YACfC,KAAMf,EACNgB,UAAWhB,EAAaV,EACzB,GAEL,CCzBA,MAAA2B,EAAe,CACbC,KAAM,a,gUAOR,MAAMhC,EAAQiC,EAkCRC,GAAqBC,EAAAA,EAAAA,KAAI,MACzBC,GAAMD,EAAAA,EAAAA,KAAI,MACVE,GAAIF,EAAAA,EAAAA,KAAI,MACRG,EAAKvC,EAAeC,IACpB,OAAE2B,EAAM,UAAEG,GAAcQ,EAAG9C,OAEjC+C,EAAAA,EAAAA,YAAU,KACRC,IAGAH,EAAE7C,MAAQ,IAAIiD,kBAAkBC,IAC9B,IAAK,MAAMC,KAAUD,EAAS,CAC5B,IAAK,MAAME,KAAOD,EAAOE,aACvB,GAAID,IAAQR,EAAI5C,MAGd,OAFA4C,EAAI5C,MAAMsD,cACVN,IAIJ,GAAIG,EAAOI,SAAWX,EAAI5C,MAGxB,OAFA4C,EAAI5C,MAAMsD,cACVN,GAGJ,KAEFH,EAAE7C,MAAMwD,QAAQd,EAAmB1C,MAAO,CACxCyD,WAAW,EACXC,YAAY,EACZC,SAAS,GACT,IAEJ,MAAMX,EAASA,KACbJ,EAAI5C,MAAQI,SAASO,cAAc,OACnCiC,EAAI5C,MAAM4D,MAAMC,gBAAmB,OAAM1B,KACzCS,EAAI5C,MAAM4D,MAAME,MAAQ,EACxBlB,EAAI5C,MAAM4D,MAAMG,OAAS,KACzBnB,EAAI5C,MAAM4D,MAAMI,SAAW,WAC3BpB,EAAI5C,MAAM4D,MAAMK,iBAAmB,SACnCrB,EAAI5C,MAAM4D,MAAMM,eAAkB,GAAE5B,OAAeA,MACnDM,EAAI5C,MAAM4D,MAAMO,cAAgB,OAChCzB,EAAmB1C,MAAMoE,YAAYxB,EAAI5C,MAAM,E,gLCtFjD,MAAMqE,EAAc,EAEpB,QCHA,MAAMC,EAAa,CAAEC,GAGfC,EAAU,SAAUC,GACtBH,EAAWI,SAAS7B,IAChB4B,EAAIE,UAAU9B,EAAEL,KAAMK,EAAE,GAEhC,EAEA,QCTA,G","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<script>\r\nexport default {\r\n name: 'watermark'\r\n}\r\n</script>\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","__default__","name","__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"],"sourceRoot":""}