VUE 实现隐形水印

VUE 实现隐形水印

<template>
  <div class="waterMask" id="water-div"></div>
</template>

<script>
    import {
        mapState
    } from "vuex"
export default {
  name: 'waterMask',
  data() {
    return {
    };
  },
  computed: {
            ...mapState({
                userInfo: (state) => state.user.userInfo,
            }),

        },
  mounted() {
    let userInfoText = this.$store.getters.userInfo.name+'-'+this.$store.getters.userInfo.phone
    let waterMaskInnerHTML = `<span style='margin-right: 50px;'>${userInfoText}</span><span style='margin-right: 50px;'>${userInfoText}</span><span>${userInfoText}</span>`
    this.watermark(waterMaskInnerHTML)
  },
  
  methods: {
    watermark(txt) {
      let userInfoText = this.$store.getters.userInfo.name+'-'+this.$store.getters.userInfo.phone
    let waterMaskInnerHTML = `<span style='margin-right: 50px;'>${userInfoText}</span><span style='margin-right: 50px;'>${userInfoText}</span><span>${userInfoText}</span>`
      //初始设置水印容器高度
      let water = document.getElementById("water-div");
      water.innerHTML = "";
      water.style.height = window.screen.availHeight + "px";
      water.style.height = document.documentElement.clientHeight + "px";
      //水印样式默认设置
      let defaultSettings = {
        watermark_txt: txt,
        watermark_x: -30,//水印起始位置x轴坐标
        watermark_y: 20,//水印起始位置Y轴坐标
        watermark_rows: 2000,//水印行数
        watermark_cols: 2000,//水印列数
        watermark_x_space: 70,//水印x轴间隔
        watermark_y_space: 70,//水印y轴间隔
        watermark_color: 'rgba(0,0,0,0.005)',//水印字体颜色(水印蒙层字体颜色设置为黑色透明,文字不透明度降至最低，肉眼不可见，通过图片处理工具如ps处理后才可见)
        watermark_fontsize: '14px',//水印字体大小
        watermark_font: '微软雅黑',//水印字体
        watermark_width: 400,//水印宽度
        watermark_height: 20,//水印长度
        watermark_angle: 15//水印倾斜度数
      };

      //获取页面最大宽度
      let page_width = Math.max(water.scrollWidth, water.clientWidth);
      //获取页面最大高度
      let page_height = Math.max(water.scrollHeight, water.clientHeight);
      // console.log( page_height)

      //水印数量自适应元素区域尺寸
      defaultSettings.watermark_cols = Math.ceil(page_width / (defaultSettings.watermark_x_space + defaultSettings.watermark_width));
      defaultSettings.watermark_rows = Math.ceil(page_height / (defaultSettings.watermark_y_space + defaultSettings.watermark_height));
      let x;
      let y;
      for (let i = 0; i < defaultSettings.watermark_rows; i++) {
        y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
        for (let j = 0; j < defaultSettings.watermark_cols; j++) {
          x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
          let mask_div = document.createElement('div');
          mask_div.className = 'item';
          mask_div.innerHTML = (defaultSettings.watermark_txt);
          //设置水印div倾斜显示
          mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.visibility = "";
          mask_div.style.position = "absolute";
          mask_div.style.left = x + 'px';
          mask_div.style.top = y + 'px';
          mask_div.style.overflow = "hidden";
          mask_div.style.zIndex = "9999";
          mask_div.style.pointerEvents = 'none';//pointer-events:none 让水印不遮挡页面的点击事件
          mask_div.style.opacity = defaultSettings.watermark_alpha;
          mask_div.style.fontSize = defaultSettings.watermark_fontsize;
          mask_div.style.fontFamily = defaultSettings.watermark_font;
          mask_div.style.color = defaultSettings.watermark_color;
          mask_div.style.width = defaultSettings.watermark_width + 'px';
          mask_div.style.height = defaultSettings.watermark_height + 'px';
          mask_div.style.display = "block";
          water.appendChild(mask_div);
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.waterMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999999; // 将组件层级提到最高，以覆盖在所有页面之上
  pointer-events: none; // 让该组件鼠标事件失效，不影响用户操作其层级之下的页面
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: transparent; // 背景色透明
}
</style>