vue 水印添加

最新推荐文章于 2024-12-21 14:34:37 发布

_大菜鸟_

最新推荐文章于 2024-12-21 14:34:37 发布

阅读量746

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46463643/article/details/126870625

版权

本文介绍了如何在Vue.js项目中添加水印功能，通过waterMark.js文件的代码实现，并在main.ts中进行引入和应用，展示了具体的效果图。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

src/utils/waterMark.js

/* eslint-disable */

var defaultSettings = {
   
	watermark_id: "wm_div_id", // 水印总体的id
	watermark_prefix: "mask_div_id", // 小水印的id前缀
	watermark_txt: "测试水印", // 水印的内容
	watermark_x: 20, // 水印起始位置x轴坐标
	watermark_y: 20, // 水印起始位置Y轴坐标
	watermark_rows: 0, // 水印行数
	watermark_cols: 0, // 水印列数
	watermark_x_space: 50, // 水印x轴间隔
	watermark_y_space: 50, // 水印y轴间隔
	watermark_font: "微软雅黑", // 水印字体
	watermark_color: "black", // 水印字体颜色
	watermark_fontsize: "18px", // 水印字体大小
	watermark_alpha: 0.15, // 水印透明度，要求设置在大于等于0.005
	watermark_width: 100, // 水印宽度
	watermark_height: 100, // 水印长度
	watermark_angle: 15, // 水印倾斜度数
	watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
	watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
	watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
	monitor: true, // monitor 是否监控， true: 不可删除水印; false: 可删水印。
};

class WaterMark {
   
	constructor(options) {
   
		this.globalSetting = null;
		this.init(options);
	}
	settingsToDefaultSetting(settings) {
   
		defaultSettings.watermark_id =
			settings.watermark_id || defaultSettings.watermark_id;
		defaultSettings.watermark_prefix =
			settings.watermark_prefix || defaultSettings.watermark_prefix;
		defaultSettings.watermark_txt =
			settings.watermark_txt || defaultSettings.watermark_txt;
		defaultSettings.watermark_x =
			settings.watermark_x || defaultSettings.watermark_x;
		defaultSettings.watermark_y =
			settings.watermark_y || defaultSettings.watermark_y;
		defaultSettings.watermark_rows =
			settings.watermark_rows || defaultSettings.watermark_rows;
		defaultSettings.watermark_cols =
			settings.watermark_cols || defaultSettings.watermark_cols;
		defaultSettings.watermark_x_space =
			settings.watermark_x_space || defaultSettings.watermark_x_space;
		defaultSettings.watermark_y_space =
			settings.watermark_y_space || defaultSettings.watermark_y_space;
		defaultSettings.watermark_font =
			settings.watermark_font || defaultSettings.watermark_font;
		defaultSettings.watermark_color =
			settings.watermark_color || defaultSettings.watermark_color;
		defaultSettings.watermark_fontsize =
			settings.watermark_fontsize || defaultSettings.watermark_fontsize;
		defaultSettings.watermark_alpha =
			settings.watermark_alpha || defaultSettings.watermark_alpha;
		defaultSettings.watermark_width =
			settings.watermark_width || defaultSettings.watermark_width;
		defaultSettings.watermark_height =
			settings.watermark_height || defaultSettings.watermark_height;
		defaultSettings.watermark_angle =
			settings.watermark_angle || defaultSettings.watermark_angle;
		defaultSettings.watermark_parent_width =
			settings.watermark_parent_width || defaultSettings.watermark_parent_width;
		defaultSettings.watermark_parent_height =
			settings.watermark_parent_height ||
			defaultSettings.watermark_parent_height;
		defaultSettings.watermark_parent_node =
			settings.watermark_parent_node || defaultSettings.watermark_parent_node;
		defaultSettings.monitor = settings.monitor || defaultSettings.monitor;
	}
	loadMark(settings) {
   
		/* 采用配置项替换默认值，作用类似jquery.extend

最低0.47元/天解锁文章