1、创建一个水印组件 waterMark.vue
<template>
<div class="watermark-outer">
<div class="watermark" v-for="i in 200" :key="i">
<div>{{userName}}</div>
{{ currentTime }}
</div>
</div>
</template>
<script>
export default {
name: "WaterMark",
data() {
return {
currentTime: new Date().toLocaleString(),
userName: '阿花',
}
},
mounted() {
setInterval(() => {
this.currentTime = new Date().toLocaleString()
this.userName = '你的名字'
}, 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(154, 152, 152, 0.3);
transform: rotate(-20deg);
font-size: 24px;
}
</style>
2、在合适的地方添加组件,跟随一起渲染,比如侧边栏layout或者app.vue中等
<waterMark></waterMark>