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

Miraitowa_chole

已于 2024-02-28 09:39:10 修改

阅读量2k

点赞数 3

分类专栏： vue专栏后台管理系统 web（pc端）文章标签： vue.js 前端 javascript css3 sass 前端框架 npm

于 2024-02-27 21:00:00 首次发布

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/136314850

版权

文章介绍了如何在Vue项目中实现一个带有登录信息的可定制水印，包括引入全局样式、创建固定位置的水印元素、使用路由控制水印显示和隐藏，以及动态更新水印颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、纯文字水印

在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`;

最低0.47元/天解锁文章