效果图
核心代码 watermark.vue
<template>
<div class="watermark-outer">
<div class="watermark" v-for="i in 200" :key="i">
<div>{{waterMarkContent}}</div>
<span style="position: relative; left: 45px; top: -5px; ">{{ currentTime }}</span>
</div>
</div>
</template>
<script>
import moment from 'moment';
export default {
name: "WaterMark",
data() {
return {
currentTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
waterMarkContent: '',
}
},
mounted() {
setInterval(() => {
let userInfo;
if(sessionStorage.getItem('user-info') !== null) {
if(!userInfo) {
userInfo = JSON.parse(sessionStorage.getItem('user-info'))
}
}
this.waterMarkContent = `${userInfo.idCard} ${userInfo.name}`
this.currentTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
}, 1000)
}
}
</script>
<style>
.watermark-outer {
position: fixed;
top: 10px;
left: 50px;
width: 5500px;
height: 2000px;
z-index: 10000;
pointer-events: none;
}
.watermark {
margin: 10px;
width: 450px;
float: left;
height: 160px;
color: rgba(0, 0, 0, 0.08);
transform: rotate(-30deg);
font-family: "Microsoft Yahei",serif;
font-size: 18px;
}
</style>
使用在App.vue中
<template>
<a-config-provider :locale="locale">
<div id="app">
<WaterMark/>
<router-view />
</div>
</a-config-provider>
</template>