Vue<简单设置页面水印效果>

效果图：

image.png

🎈此处只是简单的实现了水印效果，具体的可根据自身需求加以延伸和修改

参数设置：
水印数量 = 列数 * 行数

      watermarkNum: 0, //水印数量
      watermarkRow: 2, //列数
      watermarkLine: 4, //行数
      rotate: -20, //文字旋转角度
      color: "#ccc", //文字颜色
      watermarkText: "【疫情防控中心水印】", //水印文字
      wm_w: 0,//水印宽度百分比
      wm_h: 0 //水印高度百分比

代码如下：

<template>
  <div class="watermark">
    <div
      :style="`color:${color};transform: rotate(${rotate}deg);width:${wm_w}%;height:${wm_h}%`"
      class="wm"
      v-for="(i,index) in watermarkNum"
      :key="index"
    >{{watermarkText}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      watermarkNum: 0, //水印数量
      watermarkRow: 2, //列数
      watermarkLine: 4, //行数
      rotate: -20, //文字旋转角度
      color: "#ccc", //文字颜色
      watermarkText: "【疫情防控中心水印】", //水印文字
      wm_w: 0,//水印宽度百分比
      wm_h: 0 //水印高度百分比
    };
  },
  mounted() {
    this.setWatermark();
  },
  methods: {
    //创建水印
    setWatermark() {
      let that = this;
      that.watermarkNum = that.watermarkRow * that.watermarkLine;
      that.wm_w = 100 / that.watermarkRow;
      that.wm_h = 100 / that.watermarkLine;
    }
  }
};
</script>

<style  scoped>
.watermark {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.wm {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>