Vue项目在页面添加水印及在某一个页面去除水印功能

最新推荐文章于 2024-07-19 09:06:21 发布

置顶

哦，枫子

最新推荐文章于 2024-07-19 09:06:21 发布

阅读量3.7k

点赞数 3

文章标签： vue.js es6 node.js typescript javascript

本文链接：https://blog.csdn.net/weixin_44205155/article/details/104961334

版权

本文介绍了如何在Vue项目中实现全局水印功能，并详细讲解了两种做法：在App.vue或main.js中引入。同时，针对登录页面不显示水印的需求，提出了通过permission.js配置接口并在router.afterEach()中动态控制的方法。

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

项目需求

（1）系统内页面出现水印；
（2）登录页面没有水印【备注：退出登录时，登录页面不会显示水印**】

创建水印

创建watermark.js文件

# 创建水印功能网上一大把，随便搜一下
'use strict'

const watermark = {
   }

const setWatermark = (str) => {
   
  const id = '7.432756475.689573874'

  if (document.getElementById(id) !== null) {
   
    document.body.removeChild(document.getElementById(id))
  }

  const can = document.createElement('canvas')
  can.width = 150
  can.height = 120

  const cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '20px Vedana'
  cans.fillStyle = 'rgba(200, 200, 200, 0.20)'<