@lambo-design/water-mark 1.0.0-beta.3

package/index.js

@@ -0,0 +1,4 @@
+import LamboWaterMark from './src/water-mark';
+export {
+    LamboWaterMark
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lambo-design/water-mark",
+  "version": "1.0.0-beta.3",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "watermark-dom": "^2.3.0",
+    "@lambo-design/store": "^1.0.0-beta.64"
+  },
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
+}

package/src/waterMark.vue

@@ -0,0 +1,75 @@
+<template></template>
+<script>
+import watermark from "watermark-dom";
+
+export default {
+  computed: {
+    userName() {
+      return this.$store.state.user.userName;
+    },
+  },
+  watch: {
+    // 应该有了userName以后才执行到这个组件，但是以防万一
+    userName: function () {
+      this.removeWatermark();
+      this.addWatermark();
+    },
+  },
+  mounted() {
+    this.addWatermark();
+  },
+  unMounted() {
+    this.removeWatermark();
+  },
+  methods: {
+    async addWatermark() {
+      let systemInfo = await this.getSystemConfigSession();
+
+      this.$el.id = "watermark" + Math.random();
+      let waterOptions = {
+        watermark_txt: this.userName,
+        watermark_x: systemInfo.watermark_x,
+        watermark_y: systemInfo.watermark_y,
+        watermark_rows: systemInfo.watermark_rows,
+        watermark_cols: systemInfo.watermark_cols,
+        watermark_x_space: systemInfo.watermark_x_space,
+        watermark_y_space: systemInfo.watermark_y_space,
+        watermark_alpha: systemInfo.watermark_alpha,
+        watermark_fontsize: systemInfo.watermark_fontsize + 'px',
+        watermark_angle: systemInfo.watermark_angle,
+      };
+      // 通过系统配置获取水印组件配置信息
+      /*
+      //前7个为常用配置
+      watermark_txt:"测试水印",             //水印的内容
+      watermark_color:'black',            //水印字体颜色
+      watermark_fontsize:'18px',          //水印字体大小
+      watermark_alpha:0.15,               //水印透明度，要求设置在大于等于0.005
+      watermark_width:100,                //水印宽度
+      watermark_height:100,               //水印长度
+      watermark_angle:15,                 //水印倾斜度数
+
+      watermark_id: 'wm_div_id',          //水印总体的id
+      watermark_prefix: 'mask_div_id',    //小水印的id前缀
+      watermark_x:20,                     //水印起始位置x轴坐标
+      watermark_y:20,                     //水印起始位置Y轴坐标
+      watermark_rows:0,                   //水印行数
+      watermark_cols:0,                   //水印列数
+      watermark_x_space:100,              //水印x轴间隔
+      watermark_y_space:50,               //水印y轴间隔
+      watermark_font:'微软雅黑',           //水印字体
+      watermark_parent_width:0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
+      watermark_parent_height:0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
+      watermark_parent_node:null     //水印插件挂载的父元素element,不输入则默认挂在body上
+      */
+      watermark.load(waterOptions);
+      window.removeEventListener("resize", this.addWatermark);
+      window.addEventListener("resize", this.addWatermark);
+    },
+    removeWatermark() {
+      watermark.remove();
+      window.removeEventListener("resize", this.addWatermark);
+    },
+  },
+};
+</script>