vue3 增加全局水印（显示登录信息）

一、纯文字水印

在main.ts页面里面 加入以下代码：

// 导入 Vue 的 createApp 函数
import { createApp } from 'vue';

// 导入全局样式文件
import './style.css';

// 导入根组件 App.vue
import App from './App.vue';

// 导入路由配置
import router  from './router';

// 使用 createApp 函数创建 Vue 应用实例，并将根组件挂载到 #app 元素上
createApp(App).use(router).mount('#app');

// 定义全局变量水印颜色
let watermarkColor = 'rgba(0, 0, 0, 0.1)';

// 辅助函数用于创建水印
const addWatermark = () => {
// 水印信息  //如果水印需要获取登录信息 那就进行修改
const loginInfo = '内部数据 禁止截图外传';

// 创建水印元素
const watermark = document.createElement('div');

// 设置水印元素的类名
watermark.className = 'watermark';

// 设置水印元素的 whiteSpace 属性，保证水印文本不换行
watermark.style.whiteSpace = 'nowrap';

// 设置水印元素的 position 属性为 fixed，使其相对于视口固定位置
watermark.style.position = 'fixed';

// 设置水印元素距离视口顶部的距离
watermark.style.top = '70px';

// 设置水印元素距离视口底部的距离
watermark.style.bottom = '100px';

// 设置水印元素的 pointerEvents 属性为 'none'，使其不参与交互
watermark.style.pointerEvents = 'none';

// 设置水印元素的层级 zIndex
watermark.style.zIndex = '9999';

// 设置水印行数
const rows = 10;

// 设置每行显示的 div 数
const divsPerRow = 30;

// 设置水印行间距
const rowMarginBottom = 250;

// 设置水印左右间距
const rowMarginHorizontal = 200;

// 创建水印行和 div
for (let i = 0; i < rows; i++) {
    // 创建水印行元素
    const rowElement = document.createElement('div');
  
    // 设置水印行元素的 display 属性为 flex，使其子元素水平排列
    rowElement.style.display = 'flex';
  
    // 设置水印行元素距离下一行的底部距离
    rowElement.style.marginBottom = `${rowMarginBottom}px`;
  
    // 设置水印行元素左边距离视口左侧的距离
    rowElement.style.marginLeft = `${rowMarginHorizontal}px`;
  
    // 设置水印行元素右边距离视口右侧的距离
    rowElement.style.marginRight = `${rowMarginHorizontal}px`;
  
    // 在每行上创建 div 元素
    for (let j = 0; j < divsPerRow; j++) {
        // 创建水印的 div 元素
        const divElement = document.createElement('div');
    
        // 设置水印的 div 元素的旋转角度
        divElement.style.transform = 'rotate(-45deg)';
    
        // 设置水印的 div 元素的字体大小
        divElement.style.fontSize = '16px';
    
        // 设置水印的 div 元素的颜色为颜色变量的值
        divElement.style.color = watermarkColor;
    
        // 设置水印的 div 元素的透明度
        divElement.style.opacity = '0.5';
    
        // 设置水印的 div 元素的文本内容
        divElement.textContent = loginInfo;
    
        // 将水印的 div 元素添加到水印行元素
        rowElement.appendChild(divElement);
    }
  
    // 将水印行元素添加到水印元素
    watermark.appendChild(rowElement);
  }
  
  // 将水印元素添加到 body 中
  document.body.appendChild(watermark);
  };
  
  // 在必要时更新水印颜色
  router.beforeEach((to, from, next) => {
    //登录页不显示水印 这个是登录页的路径，根据实际项目调整
    if (to.path !== '/login') {
        // 根据需要更改颜色
        watermarkColor = 'rgba(0, 0, 0, 0.1)';
        addWatermark();
    }
    next();
});

效果如下：

二、加入登录信息（账号）的水印信息

// 导入 Vue 的 createApp 函数
import { createApp } from 'vue';
import 'uno.css';
import '@/assets/styles/index.scss';
import 'element-plus/theme-chalk/dark/css-vars.css';
// 导入根组件 App.vue
import App from './App.vue';
import store from './store';
// 导入路由配置
import router from './router';
import directive from './directive';
import plugins from './plugins/index';
import { download } from '@/utils/request';
import animate from './animate';
import 'virtual:svg-icons-register';
import ElementIcons from '@/plugins/svgicon';
import './permission';
import { useDict } from '@/utils/dict';
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
import i18n from '@/lang/index';
import horizontalScroll from 'el-table-horizontal-scroll';
import { getUserProfile } from "@/api/system/user";
const app = createApp(App);
const userForm = ref({});
//获取登录信息以及水印 (具体的接口和函数名需要根据实际项目进行调整)
const getUser = async () => {
	const res = await getUserProfile();
	userForm.value = { ...res.data.user }
	console.log(userForm.value)
	// 在获取用户信息成功后调用 addWatermark
	addWatermark();
};
// 定义颜色变量
let watermarkColor = 'rgba(0, 0, 0, 0.3)';
// 辅助函数用于创建水印
const addWatermark = () => {
	// 移除已有的水印元素
	const existingWatermark = document.querySelector('.watermark');
	if (existingWatermark) {
		document.body.removeChild(existingWatermark);
	}
	// 获取用户名，如果用户名不存在，则使用一个默认值（例如：Guest）
	const username = userForm.value?.userName || '';
	const loginInfo = `${username}禁止截图外传`;  // 移除了空格
	const watermark = document.createElement('div'); // 创建水印元素
	watermark.className = 'watermark'; // 设置水印元素的类名
	watermark.style.whiteSpace = 'nowrap'; // 设置水印元素的 whiteSpace 属性，保证水印文本不换行
	watermark.style.position = 'fixed'; // 设置水印元素的 position 属性为 fixed，使其相对于视口固定位置
	watermark.style.top = '80px'; // 设置水印元素距离视口顶部的距离
	watermark.style.bottom = '100px'; // 设置水印元素距离视口底部的距离
	watermark.style.pointerEvents = 'none'; // 设置水印元素的 pointerEvents 属性为 'none'，使其不参与交互
	watermark.style.zIndex = '9999'; // 设置水印元素的层级 zIndex
	const rows = 10; // 设置水印行数
	const divsPerRow = 18; // 设置每行显示的 div 数
	const rowMarginBottom = 280; // 设置水印行间距
	//const rowMarginHorizontal = 200; // 设置水印左右间距
	for (let i = 0; i < rows; i++) {
		const rowElement = document.createElement('div');// 创建水印行元素
		rowElement.style.display = 'flex';// 设置水印行元素的 display 属性为 flex，使其子元素水平排列
		rowElement.style.marginBottom = `${rowMarginBottom}px`;// 设置水印行元素距离下一行的底部距离
		// rowElement.style.marginLeft = `${rowMarginHorizontal}px`;// 设置水印行元素左边距离视口左侧的距离
		// rowElement.style.marginRight = `${rowMarginHorizontal}px`;// 设置水印行元素右边距离视口右侧的距离
		// 创建水印行和 div
		for (let j = 0; j < divsPerRow; j++) {
			const divElement = document.createElement('div'); // 创建水印行元素
			divElement.style.transform = 'rotate(-45deg)';// 设置水印行元素的 display 属性为 flex，使其子元素水平排列
			divElement.style.fontSize = '16px';// 设置水印行元素字体大小
			divElement.style.color = watermarkColor; // 设置水印的 div 元素的颜色为颜色变量的值
			divElement.style.opacity = '0.3'; // 设置水印的 div 元素的透明度
			divElement.style.whiteSpace = 'nowrap';  // 不换行
			divElement.textContent = loginInfo; // 设置水印的 div 元素的文本内容
			rowElement.appendChild(divElement); // 将水印的 div 元素添加到水印行元素
		}
		watermark.appendChild(rowElement);// 将水印行元素添加到水印元素
	}
	document.body.appendChild(watermark);// 将水印元素添加到 body 中
};
//移除水印的函数
const removeWatermark = () => {
    // 获取已存在的水印元素
    const existingWatermark = document.querySelector('.watermark');
    // 如果存在水印元素，则从 DOM 中移除
    if (existingWatermark) {
        document.body.removeChild(existingWatermark);
    }
};
// 在必要时更新水印颜色
router.beforeEach((to, from, next) => {
  if (to.path !== '/login') {
		// 根据需要更改颜色
		watermarkColor = 'rgba(0, 0, 0, 0.3)';
		// 将用户名存储到全局变量
		getUser();
		next();
 	} else {
		// 如果是登录页，清除水印
		removeWatermark();
		next();
  	}
});
// 全局方法挂载
app.config.globalProperties.useDict = useDict;
app.config.globalProperties.getConfigKey = getConfigKey;
app.config.globalProperties.updateConfigByKey = updateConfigByKey;
app.config.globalProperties.download = download;
app.config.globalProperties.parseTime = parseTime;
app.config.globalProperties.handleTree = handleTree;
app.config.globalProperties.addDateRange = addDateRange;
app.config.globalProperties.selectDictLabel = selectDictLabel;
app.config.globalProperties.selectDictLabels = selectDictLabels;
app.config.globalProperties.animate = animate;

app.use(ElementIcons);
app.use(router);
app.use(store);
app.use(i18n);
app.use(plugins);
app.use(horizontalScroll);

// 自定义指令
directive(app);

app.mount('#app');

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/414483.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

VUE从0到1创建项目及基本路由、页面配置

VUE从0到1创建项目及基本路由、页面配置

一、创建项目：（前提已经安装好vue和npm） 目录：E:\personal\project_pro\ windows下，win+R 输入cmd进入命令行： cd E:\personal\project_pro E：# 创建名为test的项目 vue create test# 用上下键选择vue2或vue3，回车确认创建本次选择VUE3 创建好项目后，使用…
阅读更多...
【CSS-语法】

【CSS-语法】

CSS-语法 ■ CSS简介■ CSS 实例■ CSS id 和 class选择器■ CSS 样式表■ 外部样式表(External style sheet)■ 内部样式表(Internal style sheet)■ 内联样式(Inline style)■ 多重样式 ■ CSS 文本■ CSS 文本颜色■ CSS 文本的对齐方式■ CSS 文本修饰■ CSS 文本转换■ CS…
阅读更多...
2024智慧城市革命：人工智能、场景与运营的融合之力

2024智慧城市革命：人工智能、场景与运营的融合之力

在数字革命的浪潮中&#xff0c;2024年的智慧城市将成为人类社会进步的新地标。 三大关键元素——人工智能、场景应用和精准运营——正在重新塑造城市面貌&#xff0c;构建未来的智慧城市生活图景。 一、人工智能&#xff1a;赋能智慧城市 随着人工智能技术的快速发展&#x…
阅读更多...
第十二篇【传奇开心果系列】Python文本和语音相互转换库技术点案例示例：深度解读SpeechRecognition语音转文本

第十二篇【传奇开心果系列】Python文本和语音相互转换库技术点案例示例：深度解读SpeechRecognition语音转文本

传奇开心果系列 系列博文目录Python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、SpeechRecognition语音转文本一般的操作步骤和示例代码二、SpeechRecognition 语音转文本的优势和特点三、易用性深度解读和示例代码四、多引擎支持深度解读和示例代码五、灵活性示…
阅读更多...
VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.1 GEN1 HUB芯片 VL817-Q7 USB3.1 GEN1 HUB芯片 VIA Lab的VL817是一款现代USB 3.1 Gen 1集线器控制器&#xff0c;具有优化的成本结构和完全符合USB标准3.1 Gen 1规范&#xff0c;包括ecn和2017年1月的合规性测试更新。VL817提供双端口和双端口4端口配置&…
阅读更多...
Alist访问主页显示空白解决方法

Alist访问主页显示空白解决方法

文章目录 问题记录问题探索和解决网络方案问题探究脚本内容查看 最终解决教程 问题记录 访问Alist主页显示空白&#xff0c;按F12打开开发人员工具 ,选择控制台&#xff0c;报错如下 index.75e31196.js:20 Uncaught TypeError: Cannot assign to read only property __symbo…
阅读更多...
我来告诉你，为什么你的第一份工作要去大厂

我来告诉你，为什么你的第一份工作要去大厂

选择第一份工作&#xff0c;就像是为你的职业生涯设置航向&#xff0c;起点往往决定了你能飞得多高。 为什么说走进大厂是一个明智的决策呢&#xff1f; 简单来说&#xff0c;大厂不仅是一个工作的地方&#xff0c;它是一个成长的加速器&#xff0c;一个能让你的能力和视野快速…
阅读更多...
2023年清洁纸品行业分析报告：线上市场销额突破124亿，湿厕纸为重点增长类目

2023年清洁纸品行业分析报告：线上市场销额突破124亿，湿厕纸为重点增长类目

如今&#xff0c;清洁纸品早已经成为人们日常生活的必需品&#xff0c;其市场规模也比较庞大。从销售数据来看&#xff0c;尽管2023年清洁纸品市场整体的销售成绩呈现下滑&#xff0c;但其市场体量仍非常大。 鲸参谋数据显示&#xff0c;2023年京东平台上清洁纸品市场的销量将…
阅读更多...
【QT+QGIS跨平台编译】之五十三：【QGIS_CORE跨平台编译】—【qgssqlstatementparser.cpp生成】

【QT+QGIS跨平台编译】之五十三：【QGIS_CORE跨平台编译】—【qgssqlstatementparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器，它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison，您可以使用…
阅读更多...
分享three.js和cannon.js构建Web 3D场景

分享three.js和cannon.js构建Web 3D场景

使用 three.js&#xff0c;您不再需要花哨的游戏PC或控制台来显示逼真的3D图形。 您甚至不需要下载特殊的应用程序。现在每个人都可以使用智能手机和网络浏览器体验令人惊叹的3D应用程序。 这个惊人的库和充满活力的社区是您在浏览器、笔记本电脑、平板电脑或智能手机上创建游…
阅读更多...
Flink SQL 中的流式概念：状态算子

Flink SQL 中的流式概念：状态算子

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…
阅读更多...
认识AJAX

认识AJAX

一、什么是Ajax? 有跳转就是同步&#xff0c;无跳转就是异步 Asynchronous Javascript And XML&#xff08;异步JavaScript和XML&#xff09; Ajax 异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术通过在后台与服务器进行少量数据交换&#xff0c;Ajax可以使网…
阅读更多...
Python手册(Machine Learning)--LightGBM

Python手册(Machine Learning)--LightGBM

Overview LightGBM&#xff08;Light Gradient Boosting Machine&#xff09;是一种高效的 Gradient Boosting 算法&#xff0c; 主要用于解决GBDT在海量数据中遇到的问题&#xff0c;以便更好更快的用于工业实践中。 数据结构说明lightgbm.DatasetLightGBM数据集lightgbm.Bo…
阅读更多...
Stable Diffusion WebUI 图库浏览器插件：浏览器以前生成的图片

Stable Diffusion WebUI 图库浏览器插件：浏览器以前生成的图片

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文介绍的插件叫图库浏览器&#xff0c;是一个用于浏览器以前生成的图片信息的插件。本文将介绍该插件的安装和使用&#xff0c;希望能够对你有所帮助。 文章…
阅读更多...
【JavaEE】_前端POST请求使用json向后端传参

【JavaEE】_前端POST请求使用json向后端传参

目录 1. 关于json 2. 通过Maven仓库&#xff0c;将Jackson下载导入到项目中 3. 使用Jackson 3.1 关于readValue方法 3.2 关于Request.class类对象 3.3 关于request对象的属性类型 3.4 关于writeValueAsString 前端向后端传递参数通常有三种方法&#xff1a; 第一种&…
阅读更多...
UI自动化测试：playwright工具（一）：python环境下安装、UI录制使用（需要些代码能力）

UI自动化测试：playwright工具（一）：python环境下安装、UI录制使用（需要些代码能力）

一、python环境下安装playwright工具 1. 安装playwright库 pip install playwright -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com#至于镜像源，可以选，也可不选：#阿里云 http://mirrors.aliyun.com/pypi/simple/ #中国科技大学 https://py…
阅读更多...
全面升级！Apache HugeGraph 1.2.0版本发布

全面升级！Apache HugeGraph 1.2.0版本发布

图数据库以独特的数据管理和分析能力&#xff0c;在企业数智化转型的过程中正在成为数据治理的核心&#xff0c;根据IDC调研显示&#xff0c;95%的企业认为图数据库是重要的数据管理工具&#xff0c;超过65%的厂商认为在业务上图数据库优于其他选择&#xff0c;尤其是在金融风控…
阅读更多...
C语言题目练习

C语言题目练习

目录 前言 1、网购 1.1题目 描述 输入描述&#xff1a; 输出描述&#xff1a; ​编辑 1.1 解题 2、带空格直角三角形图案 2.1题目 描述 输入描述&#xff1a; 输出描述&#xff1a; ​编辑 2.2 解题 3、小乐乐改数字 3.1 题目 描述 输入描述&#xff1a; 输…
阅读更多...
基于非合作博弈的风-光-氢微电网容量优化配置（matlab代码）

基于非合作博弈的风-光-氢微电网容量优化配置（matlab代码）

目录 1 主要内容 模型架构图 目标函数 非合作博弈流程 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现《基于非合作博弈的风-光-氢微电网容量优化配置》&#xff0c;程序包含3种场景&#xff0c;场景1中包含风电、光伏和制氢-储氢-发电3种分布式电源&#xff…
阅读更多...
nginx 模块 高级配置

nginx 模块 高级配置

目录 一、高级配置 1.1. 网页的状态页 1.2.Nginx 第三方模块 ehco 模块 打印 1.3.变量 1.3.1 内置变量 1.3.2自定义变量 1.4.Nginx压缩功能 1.5.https 功能 1.6.自定义图标 一、高级配置 1.1. 网页的状态页 基于nginx 模块 ngx_http_stub_status_module 实现&…
阅读更多...
最新文章

Copyright @ 2022~2023