icon

src/App.vue

@@ -1,16 +1,71 @@
 <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{
-        height: calc(100% - 60px)!important;
-  }
+#app .sidebar-container.has-logo .el-scrollbar {
+  height: calc(100% - 60px) !important;
+}
 </style>

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
@@ -69,25 +68,25 @@ Vue.directive('loadMore', {
 })
 
 import LxHeader from "@/components/LxHeader"
-Vue.component('lx-header',LxHeader)
+Vue.component('lx-header', LxHeader)
 import XyTable from '@/components/XyTable'
-Vue.component('xy-table',XyTable)
+Vue.component('xy-table', XyTable)
 import XyDialog from '@/components/XyDialog'
-Vue.component('xy-dialog',XyDialog)
+Vue.component('xy-dialog', XyDialog)
 import XySelectors from '@/components/XySelectors'
-Vue.component('xy-selectors',XySelectors)
+Vue.component('xy-selectors', XySelectors)
 import draggable from 'vuedraggable';
-Vue.component('draggable',draggable)
+Vue.component('draggable', draggable)
 import tinymce from '@/components/XyTinymce'
-Vue.component('my-tinymce',tinymce)
+Vue.component('my-tinymce', tinymce)
 import myMap from "@/components/XyMap"
-Vue.component('my-map',myMap)
+Vue.component('my-map', myMap)
 import afTableColumn from 'af-table-column'
-Vue.component('af-table-column',afTableColumn)
+Vue.component('af-table-column', afTableColumn)
 
-Vue.prototype.$integrateData = (target,value) => {
-  for(let i in target){
-    if(target.hasOwnProperty(i) && value.hasOwnProperty(i)){
+Vue.prototype.$integrateData = (target, value) => {
+  for (let i in target) {
+    if (target.hasOwnProperty(i) && value.hasOwnProperty(i)) {
       target[i] = value[i]
     }
   }

src/router/index.js

@@ -1,3 +1,4 @@
+
 import Vue from 'vue'
 import Router from 'vue-router'
 
@@ -172,5 +173,5 @@ export function resetRouter() {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }
-
+
 export default 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