添加水印

package.json

@@ -16,9 +16,12 @@
     "element-ui": "^2.3.2",
     "express": "^4.17.1",
     "file-saver": "^2.0.0",
+    "fingerprintjs2": "^2.0.6",
+    "js-base64": "^2.5.1",
     "js-cookie": "^2.2.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
+    "md5": "^2.2.1",
     "moment": "^2.22.1",
     "normalize.css": "^8.0.0",
     "nprogress": "^0.2.0",
@@ -29,22 +32,20 @@
     "vue-iconfont": "^2.5.1",
     "vue-json-excel": "^0.2.98",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1",
-    "fingerprintjs2": "^2.0.6",
-    "js-base64": "^2.5.1",
-    "md5": "^2.2.1",
     "vue2-ace-editor": "^0.0.13",
     "vuedraggable": "^2.21.0",
-    "vuex-persistedstate": "^2.5.4"
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4",
+    "watermark-dom": "^2.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-router": "~4.4.0",
     "@vue/cli-plugin-vuex": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
+    "compression-webpack-plugin": "^2.0.0",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
-    "vue-template-compiler": "^2.6.11",
-    "compression-webpack-plugin": "^2.0.0"
+    "vue-template-compiler": "^2.6.11"
   }
 }

src/App.vue

@@ -5,32 +5,43 @@
 </template>
 
 <script>
-  import vueCanvasNest from 'vue-canvas-nest'
+import vueCanvasNest from "vue-canvas-nest";
+// npm install watermark-dom --save 安装水印插件
 
-  export default {
-    name: 'app',
-    components: {vueCanvasNest},
-    mounted () {
-      this.$nextTick(() => {
-        document.getElementById('loading').innerHTML = ''
-      })
-
-    }
-  }
+//引入水印插件
+import watermark from "watermark-dom";
+export default {
+  name: "app",
+  components: { vueCanvasNest },
+  created() {
+    const userName = localStorage.getItem("userName");
+    const userCell = localStorage.getItem("userCell");
+    const userCells = userCell.substr(-4);
+    setTimeout(() => {
+      if (userName) {
+        watermark.load({ watermark_txt: userName + userCells ,watermark_color:'#aaa',watermark_angle:30,});
+      }
+    }, 100);
+  },
+  mounted() {
+    this.$nextTick(() => {
+      document.getElementById("loading").innerHTML = "";
+    });
+  },
+};
 </script>
 <style>
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
-  #app {
-    width: 100%;
-    height: 100%;
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    /* overflow: auto; */
-  }
+* {
+  margin: 0;
+  padding: 0;
+}
 
+#app {
+  width: 100%;
+  height: 100%;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* overflow: auto; */
+}
 </style>

src/components/login/Login.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script type="text/ecmascript-6">
+import watermark from "watermark-dom";
+
 export default {
   name: "SisLogin",
   data() {
@@ -122,9 +124,13 @@ export default {
         this.$cacheUtils.cleanCache();
         this.$$post("/login", this.user).then((res) => {
           if (res.data.code === "200") {
+             watermark.load({ watermark_txt: res.data.result.userName + res.data.result.userCell.substr(-4) ,watermark_color:'#aaa',watermark_angle:30,});
+            // console.log(res.data.result,'登录成功返回的结果');
             localStorage.setItem("userName", res.data.result.userName);
             localStorage.setItem("agentNo", res.data.result.extensionNumber);
             localStorage.setItem("loginName", res.data.result.loginName);
+            localStorage.setItem("userCell", res.data.result.userCell);
+            // console.log(res.data.result.userCell,'返回的手机号');
 
             let userRolePermission = this.userRolelistToStringUtils(
               res.data.result.userRole

yarn.lock

@@ -7972,6 +7972,11 @@
     "chokidar" "^3.4.1"
     "watchpack-chokidar2" "^2.0.1"
 
+"watermark-dom@^2.3.0":
+  "integrity" "sha512-2++fJESs8ULlrOPHEJGi72UxcDmVTsJDZ3kMa5umU6IWc78A4g1kOAqh1k6FEQhrq9QpkV7wzuoUeMhvFlWGWg=="
+  "resolved" "https://registry.npmjs.org/watermark-dom/-/watermark-dom-2.3.0.tgz"
+  "version" "2.3.0"
+
 "wbuf@^1.1.0", "wbuf@^1.7.3":
   "integrity" "sha1-wdjRSTFtPqhShIiVy2oL/oh7h98="
   "resolved" "https://registry.npm.taobao.org/wbuf/download/wbuf-1.7.3.tgz"