加水印

package-lock.json

@@ -21110,6 +21110,11 @@
                 }
             }
         },
+        "watermark-dom": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmmirror.com/watermark-dom/-/watermark-dom-2.3.0.tgz",
+            "integrity": "sha512-2++fJESs8ULlrOPHEJGi72UxcDmVTsJDZ3kMa5umU6IWc78A4g1kOAqh1k6FEQhrq9QpkV7wzuoUeMhvFlWGWg=="
+        },
         "wbuf": {
             "version": "1.7.3",
             "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",

package.json

@@ -29,7 +29,8 @@
         "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.1.6",
         "vuex": "^3.4.0",
-        "vuex-persistedstate": "^4.0.0-beta.3"
+        "vuex-persistedstate": "^4.0.0-beta.3",
+        "watermark-dom": "^2.3.0"
     },
     "devDependencies": {
         "@stomp/stompjs": "^5.4.4",

src/pages/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-wrap">
+    <div class="layout-wrap" ref="watermarkContainer">
         <LayoutHeader />
         <div class="layout-bottom-wrap">
             <!-- <SideMenu /> -->
@@ -12,6 +12,7 @@
     </div>
 </template>
 <script>
+import watermark from 'watermark-dom';
 export default {
     components: {
         LayoutHeader: () => import('./components/LayoutHeader'),
@@ -31,6 +32,53 @@ export default {
             return this.$route.name; // 获取当前路由的名称
         }
     },
+    mounted() {
+        this.addWatermark();
+    },
+    methods: {
+        addWatermark() {
+           
+            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+            let watermark_txt = userInfo.realName + ' '+ userInfo.phone
+            let options = {
+                // 水印内容
+                watermark_txt: watermark_txt,
+                // 水印起始位置x轴坐标
+                watermark_x: 20,
+                // 水印起始位置Y轴坐标
+                watermark_y: 20,
+                // 水印行数
+                watermark_rows: 5,
+                // 水印列数
+                watermark_cols: 10,
+                // 水印x轴间隔
+                watermark_x_space: 150,
+                // 水印y轴间隔
+                watermark_y_space: 150,
+                // 水印字体颜色
+                watermark_color: '#aaa',
+                // 水印透明度
+                watermark_alpha: 0.2,
+                // 水印字体大小
+                watermark_fontsize: '15px',
+                // 水印字体
+                watermark_font: '微软雅黑',
+                // 水印宽度
+                watermark_width: 210,
+                // 水印长度
+                watermark_height: 80,
+                // 水印倾斜度数
+                watermark_angle: 15
+            }
+
+            watermark.init(options);
+            // watermark.load({
+            //     watermark_txt: '水印文本',
+            //     watermark_parent_node: this.$refs.watermarkContainer,
+            //     options11
+            // });
+        },
+    },
 }
 </script>
 <style lang="scss">