icon

src/App.vue

@@ -1,13 +1,68 @@
 <template>
-  <div id="app">
+  <div id="app" ref="containerS">
     <router-view />
   </div>
 </template>
 
 <script>
+import {
+  getInfo
+} from '@/api/user'
+import {
+  getToken
+} from '@/utils/auth'
+import Watermark from "@/utils/waterMarker/index.js";
 export default {
-  name: 'App'
+  name: "App",
+  data() {
+    return {
+      username: "", // 这里设置用户名作为水印内容
+    };
+  },
+  watch: {
+    $route(to, from) {
+      this.$nextTick(function () {
+
+        this.loadUser()
+      });
+    },
+    username(to, from) {
+      Watermark.set(this.username, this.$refs.containerS);
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    loadUser() {
+
+      var token = getToken();
+      console.log(token)
+      if (token) {
+        getInfo(token).then(response => {
+
+          const {
+            roles,
+            name,
+            avatar
+          } = response;
+          this.username = response.name+" "+this.$moment().format("HH:mm:ss");
+          Watermark.set(this.username, this.$refs.containerS);
+        }).catch(error => {
+        })
+      }
+      else {
+        this.username = "";
+        Watermark.set(this.username, this.$refs.containerS);
+      }
+    }
+  }
+  , created() {
+
+    this.$nextTick(function () {
+      this.loadUser()
+    });
   }
+};
 </script>
 <style lang="scss">
 #app .sidebar-container.has-logo .el-scrollbar {

src/main.js

@@ -22,7 +22,6 @@ Vue.prototype.$moment = moment;
 Vue.prototype.base = base;
 import '@/icons' // icon
 import '@/permission' // permission control
-
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/router/index.js

@@ -1,3 +1,4 @@
+
 import Vue from 'vue'
 import Router from 'vue-router'
 

src/utils/waterMarker/index.js

@@ -0,0 +1,55 @@
+'use strict'
+const watermark = {}
+const setWatermark = (str, container) => {
+  const id = '1.23452384164.123412415'
+  if (container === undefined) {
+    return
+  }
+
+  // 查看页面上有没有，如果有则删除
+  if (document.getElementById(id) !== null) {
+    const childelement = document.getElementById(id)
+    childelement.parentNode.removeChild(childelement)
+  }
+  var containerWidth = container.offsetWidth // 获取父容器宽
+  var containerHeight = container.offsetHeight // 获取父容器高
+  container.style.position = 'relative' // 设置布局为相对布局
+  // 创建canvas元素(先制作一块背景图)
+  const can = document.createElement('canvas')
+  can.width = 300 // 设置每一块的宽度
+  can.height = 300 // 高度
+  const cans = can.getContext('2d') // 获取canvas画布
+  cans.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9
+  cans.font = '20px Vedana' // 设置字体
+  cans.fillStyle = 'rgba(0, 0, 0, 0.1)' // 设置字体的颜色
+  cans.textAlign = 'left' // 文本对齐方式
+  cans.textBaseline = 'Middle' // 文本基线
+  cans.fillText(str, 0, 4 * can.height / 5) // 绘制文字
+  // 创建一个div元素
+  const div = document.createElement('div')
+  div.id = id // 设置id
+  div.style.pointerEvents = 'none' // 取消所有事件
+  div.style.top = '0px'
+  div.style.left = '0px'
+  div.style.position = 'absolute'
+  div.style.zIndex = '100000'
+  div.style.width = containerWidth + 'px'
+  div.style.height = containerHeight + 'px'
+  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+  container.appendChild(div) // 追加到页面
+  return id
+}
+// 该方法只允许调用一次
+watermark.set = (str, container) => {
+  let id = setWatermark(str, container)
+  setInterval(() => {
+    if (document.getElementById(id) === null) {
+      id = setWatermark(str, container)
+    }
+  }, 500)
+  // 监听页面大小的变化
+  window.onresize = () => {
+    setWatermark(str, container)
+  }
+}
+export default watermark