第一步：水印work.js

function watermark(setting) {
    var key
    //默认设置
    var defaultSettings = {
        watermark_id: '',
        watermark_txt: '',
        watermark_x: 20, //水印起始位置x轴坐标
        watermark_y: 20, //水印起始位置Y轴坐标
        watermark_rows: 6, //水印行数
        watermark_cols: 10, //水印列数
        watermark_x_space: 10, //水印x轴间隔
        watermark_y_space: 30, //水印y轴间隔
        watermark_color: '#aaa', //水印字体颜色
        watermark_alpha: 0.3, //水印透明度
        watermark_fontsize: '14px', //水印字体大小
        watermark_font: '微软雅黑', //水印字体
        watermark_width: 80, //水印宽度
        watermark_height: 80, //水印长度
        watermark_angle: 15, //水印倾斜度数
        watermark_position: 'fixed' // 水印定位方式
    }
    //采用配置项替换默认值，作用类似jquery.extend
    if (arguments.length === 1 && typeof arguments[0] === 'object') {
        var src = arguments[0] || {}
        for (key in src) {
            if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
                continue
            else if (src[key]) defaultSettings[key] = src[key]
        }
    }

    var oTemp = document.createDocumentFragment()

    // 获取视口宽度和高度
    var viewportWidth = window.innerWidth
    var viewportHeight = window.innerHeight

    // 计算水印列数和行数的最大值
    var maxCols = Math.floor(
        viewportWidth /
        (defaultSettings.watermark_width + defaultSettings.watermark_x_space)
    )
    var maxRows = Math.floor(
        viewportHeight /
        (defaultSettings.watermark_height + defaultSettings.watermark_y_space)
    )

    // 如果用户没有设置列数或行数，则使用计算出的最大值
    if (defaultSettings.watermark_cols === 0) {
        defaultSettings.watermark_cols = maxCols
    }
    if (defaultSettings.watermark_rows === 0) {
        defaultSettings.watermark_rows = maxRows
    }

    // 确保水印列数和行数不超过计算出的最大值
    defaultSettings.watermark_cols = Math.min(
        defaultSettings.watermark_cols,
        maxCols
    )
    defaultSettings.watermark_rows = Math.min(
        defaultSettings.watermark_rows,
        maxRows
    )

    // 计算列和行的间距，以确保水印可以均匀铺满全屏
    defaultSettings.watermark_x_space =
        (viewportWidth -
            defaultSettings.watermark_width * defaultSettings.watermark_cols) /
        (defaultSettings.watermark_cols - 1)
    defaultSettings.watermark_y_space =
        (viewportHeight -
            defaultSettings.watermark_height * defaultSettings.watermark_rows) /
        (defaultSettings.watermark_rows - 1)
    var x
    var y
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
        y =
            defaultSettings.watermark_y +
            (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
        for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x =
                defaultSettings.watermark_x +
                (defaultSettings.watermark_width + defaultSettings.watermark_x_space) *
                j

            var mask_div = document.createElement('div')
            mask_div.id = 'mask_div' + i + j
            mask_div.className = 'mask_div'
            mask_div.appendChild(
                document.createTextNode(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 = defaultSettings.watermark_position
            mask_div.style.left = x + 'px'
            mask_div.style.top = y + 'px'
            mask_div.style.overflow = 'hidden'
            mask_div.style.zIndex = '999'
            mask_div.style.pointerEvents = 'none' //pointer-events: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 = 'block'
            oTemp.appendChild(mask_div)
        }
    }
    document.getElementById(defaultSettings.watermark_id).appendChild(oTemp)
}
// 添加水印的函数
function addWatermark(setting) {
    watermark(setting)
}

// 移除水印的函数
function removeWatermark(watermarkId) {
    var watermarkDivs = document.querySelectorAll(
        '#' + watermarkId + ' .mask_div'
    )
    watermarkDivs.forEach(function (div) {
        div.parentNode.removeChild(div)
    })
}
// 将功能封装为一个对象
const watermarkModule = {
    add: addWatermark,
    remove: removeWatermark
}

export default watermarkModule

第二步：在页面中使用（引入）

html

<template>
  <div class="Mains" id="watermark-container"></div>
</template>

js

import watermarkModule from "@/utils/work.js"
onMounted(async ()=>{
  // 添加水印
  watermarkModule.add({
    watermark_txt: localStorage.getItem('nickName'),
    watermark_id: 'watermark-container',
    // 其他配置...
  });

  // 移除水印
  // watermarkModule.remove('watermark-container');
})