Vue中添加全屏动态时间水印

效果图

核心代码 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>