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

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>