parent
6cd2da3c98
commit
eb7ac75d81
@ -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>
|
||||
|
||||
@ -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
|
||||
Loading…
Reference in new issue