效果图:
App.vue文件
<template>
<router-view />
</template>
<script>
import Watermark from '@/utils/watermark'
import { dateFormat } from '@/utils/util'
export default {
data() {
return {
toPath: '',
fromPath: ''
}
},
watch: {
$route(to, from) {
this.toPath = to.path
this.fromPath = from.path
if (to.path === '/login') {
this.setWatermark()
} else if (from.path === '/login') {
this.setWatermark()
}
}
},
created() {
// page load and read vuex state grom sessionStorage
sessionStorage.getItem('vuex') &&
this.$store.replaceState(Object.assign(this.$store.getters, JSON.parse(sessionStorage.getItem('vuex'))))
// page refresh save vuex statw to sessionStorage
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('vuex', JSON.stringify(this.$store.getters))
})
},
mounted() {
this.setWatermark()
this.$nextTick(() => {
setInterval(this.setWatermark, 600000)
})
},
methods: {
setWatermark() {
if (this.toPath === '/login') {
Watermark.set('')
} else {
Watermark.set(
this.$store.getters.userInfo.employeeNo +
'-' +
'大阳plus' +
' ' +
dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
)
}
}
}
}
</script>
<style>
body {
font-size: 16px;
background-color: white;
margin: 0px;
-webkit-font-smoothing: antialiased;
}
</style>
watermark.js文件
let watermark = {}
let setWatermark = str => {
let id = '1.23452384164.123412416'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
// 创建一个画布
let can = document.createElement('canvas')
// 设置画布的长宽
can.width = 700
can.height = 600
let cans = can.getContext('2d')
// 旋转角度
cans.rotate((-30 * Math.PI) / 180)
cans.font = '20px SimHei'
// 设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(200, 200, 200, 0.50)'
// 设置文本内容的当前对齐方式
cans.textAlign = 'left'
// 设置在绘制文本时使用的当前文本基线
cans.textBaseline = 'Middle'
// 在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置)
cans.fillText(str, can.width / 8, can.height / 2)
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '30px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set = str => {
let id = setWatermark(str)
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str)
}
}, 500)
window.onresize = () => {
setWatermark(str)
}
}
export default watermark
dateFormat:时间转换
const dateFormat = function (date, fmt) {
fmt = fmt || 'yyyy-MM-dd hh:mm:ss'
if (date === null || typeof date === 'undefined' || date === '') {
return null
} else {
// 时间要转成obj,否则报错
date = new Date(date)
}
var o = {
'M+': date.getMonth() + 1, // 月
'd+': date.getDate(), // 日
'h+': date.getHours(), // 时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
}
}
return fmt
}
app.vue文件的vue3写法
<template>
<router-view />
</template>
<script setup>
import Watermark from '@/utils/watermark'
import { dateFormat } from '@/utils/util'
import { reactive, onMounted, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const route = useRoute()
const reactData = reactive({
toPath: ''
})
onMounted(() => {
setWatermark()
nextTick(() => {
setInterval(setWatermark(), 600000)
})
})
watch(
() => router.currentRoute.value.path,
toPath => {
// 要执行的方法
reactData.toPath = toPath
setWatermark()
},
{ immediate: true, deep: true }
)
function setWatermark() {
// 主要是这
if (reactData.toPath === '/login') {
Watermark.set('')
} else {
Watermark.set(
store.getters.userInfo.employeeNo +
'-' +
store.getters.userInfo.orgName +
' ' +
dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
)
}
}
</script>
<style lang="scss" scoped>
body {
font-size: 16px;
background-color: white;
margin: 0px;
-webkit-font-smoothing: antialiased;
}
</style>