1、新建waterMark.js文件

const getWaterMarkContent = () => {
    const options = { content: '', propLength: 1 };
    const watermarkcontent = localStorage.getItem('water-mark-content') || '';
    const watermarkcontentArr = watermarkcontent.split('@@and@@').filter(str => str);
    if (watermarkcontentArr.length > 0) {
        options.content = watermarkcontentArr.join(' ');
        options.propLength = watermarkcontentArr.length;
    }
    return options;
};
export function watermark(settings) {
    //默认设置
    const { domElement } = settings
    var defaultSettings = {
        watermark_txt: "娃哈哈哈哈哈",
        watermark_x: 20, //水印起始位置x轴坐标
        watermark_y: 40, //水印起始位置Y轴坐标
        watermark_rows: 0, //水印行数
        watermark_cols: 0, //水印列数
        watermark_x_space: 30, //水印x轴间隔
        watermark_y_space: 100, //水印y轴间隔
        watermark_color: '#99999957', //水印字体颜色
        watermark_alpha: 0.8, //水印透明度
        watermark_fontsize: '18px', //水印字体大小
        watermark_font: '微软雅黑', //水印字体
        watermark_width: 250, //水印宽度
        watermark_height: 50, //水印长度
        watermark_angle: 35 //水印倾斜度数
    };
    //采用配置项替换默认值，作用类似jquery.extend
    if (arguments.length === 1 && typeof arguments[0] === "object") {
        let src = arguments[0] || {};
        Object.keys(src).forEach(e => {
            defaultSettings[e] = src[e]
        })
    }

    var oTemp = window.document.createDocumentFragment();
    //获取页面最大宽度
    var page_width = Math.max(window.document.body.scrollWidth, window.document.body.clientWidth) - 30;
    //获取页面最大长度
    var page_height = Math.max(domElement.clientHeight, window.document.body.clientHeight, domElement.scrollHeight) - 100;
    // var page_height = Math.max(document.querySelector('#cases').scrollHeight, document.querySelector('#cases').clientHeight)-100;
    // console.log(page_width, page_height);
    //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
    if (defaultSettings.watermark_cols == 0 ||
        (parseInt(defaultSettings.watermark_x +
                defaultSettings.watermark_width * defaultSettings.watermark_cols +
                defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) >
            page_width)) {
        defaultSettings.watermark_cols =
            parseInt((page_width -
                    defaultSettings.watermark_x +
                    defaultSettings.watermark_x_space) /
                (defaultSettings.watermark_width +
                    defaultSettings.watermark_x_space));
        defaultSettings.watermark_x_space =
            parseInt((page_width -
                    defaultSettings.watermark_x -
                    defaultSettings.watermark_width *
                    defaultSettings.watermark_cols) /
                (defaultSettings.watermark_cols - 1));
    }
    // 如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔

    if (defaultSettings.watermark_rows == 0 ||
        (parseInt(defaultSettings.watermark_y +
                defaultSettings.watermark_height * defaultSettings.watermark_rows +
                defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) >
            page_height)) {
        defaultSettings.watermark_rows =
            parseInt((defaultSettings.watermark_y_space +
                    page_height - defaultSettings.watermark_y) /
                (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
        defaultSettings.watermark_y_space =
            parseInt((page_height -
                    defaultSettings.watermark_y -
                    defaultSettings.watermark_height *
                    defaultSettings.watermark_rows) /
                (defaultSettings.watermark_rows - 1));
    }

    let x;
    let y;
    const option = getWaterMarkContent();
    let waterText = option.content || defaultSettings.watermark_txt
    
    const waterSection = document.createElement('section')
    waterSection.id = 'waterMark';
    waterSection.style.position = 'absolute'
    waterSection.style.left = '0px'
    waterSection.style.top = '0px'
    waterSection.style.right = '0px'
    waterSection.style.bottom = '0px'

    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 = window.document.createElement('div');
            mask_div.classList.add('print_waterMask')
            mask_div.id = 'mask_div' + i + j;
            mask_div.appendChild(window.document.createTextNode(waterText));
            //设置水印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 = "visible";
            mask_div.style.position = "absolute";
            mask_div.style.left = x + 'px';
            mask_div.style.top = y + 'px';
            mask_div.style.zIndex = "99999";
            mask_div.style.pointerEvents = "none";
            //mask_div.style.border="solid #eee 1px";
            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.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_height + 'px';
            mask_div.style.display = "inline-block";
            // domElement.appendChild(mask_div);
            waterSection.appendChild(mask_div);
        };
    };

    /** 加大logo水印 */
    let logo_div = window.document.createElement('img');
    logo_div.src = require('@/assets/bigscreen_images/logo-big-bg.png');
    logo_div.style.position = "absolute";
    logo_div.style.left = '50%';
    logo_div.style.top = '170px';
    logo_div.style.transform = 'translate(-50%)';
    logo_div.style.zIndex = "99999";
    logo_div.style.pointerEvents = "none";

    domElement.appendChild(logo_div);
    waterSection.appendChild(logo_div);
    domElement.appendChild(waterSection);
}

2、使用方法

<template>
  <div class="container" ref="waterDom"></div>
</template>

<script>
// 引入waterMark文件
import { watermark } from '@/utils/waterMark'
export default {
  name: "App",
  provide() {
    return {};
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    watermark({
      watermark_txt: "添加水印",
      domElement: this.$refs.waterDom
    })
  },
  methods: {}
};
</script>

<style lang="scss">

</style>