vue 水印方法封装

功能：添加水印 移出水印

效果图：

代码：

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

使用方法：

<template>
	<div id="watermark-container" class="container"></div>
</template>
<script>
import watermarkModule from '../utils/waterMark';
export default {
	data() {
		return {};
	},
	mounted() {
		// 添加水印
		watermarkModule.add({
			watermark_txt: '试看内容',
			watermark_id: 'watermark-container',
			// 其他配置...
		});

		// 移除水印
		watermarkModule.remove('watermark-container');
	},
};
</script>
<style lang="less" scoped></style>