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

项目需求

（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 = 150can.height = 120const cans = can.getContext('2d')cans.rotate(-20 * Math.PI / 180)cans.font = '20px Vedana'cans.fillStyle = 'rgba(200, 200, 200, 0.20)'cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 3, can.height / 2)const div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '70px'div.style.left = '0px'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth - 100 + 'px'div.style.height = document.documentElement.clientHeight - 100 + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'document.body.appendChild(div)return id
}// 该方法只允许调用一次
watermark.set = (str) => {let id = setWatermark(str)setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str)}}, 500)window.onresize = () => {setWatermark(str)}
}export default watermark

具体实现

第一种做法：在App.vue中引用或其他页面都可以

1.在App.vue文件中，导入该文件
import Watermark from '@/watermark';  //路径不要写错2.在函数中调用，一种就可以mounted： 写法mounted() {Watermark.set("水印内容")}created： 写法created() {Watermark.set('admin')}

第二种做法：配置js文件，在main.js文件中引入

本人通过配置 permission.js文件

import '@/permission' //路径不要写错哟

// permission主要代码
router.beforeEach(async(to, from, next) => {const hasToken = getToken()if (hasToken) {if (to.path === '/login') {next(`/login`)} }
})router.afterEach((to) => {const title = getToken()if (title) {Watermark.set(title) // 设置水印title} else {Watermark.out() // 清除水印}
})

自己定义了一个去除水印的接口 watermark.js文件

// 在watermark.js文件中
const outWatermark = (id) => {if (document.getElementById(id) !== null) {const div = document.getElementById(id)div.style.display = 'none'}
}watermark.out = () => {const str = '7.432756475.689573874'outWatermark(str)
}

注意内容：

我们一般在路由跳转的时候来进行用户的登录和权限的判断，所以我们可以将调用水印的方法放在router.afterEach()方法中，在router.beforeEach（）方法中判断用户的登录和权限的判断，所以router.afterEach()方法中一定可以用户信息。

当然这些可能不是最优的解决方案，但希望能给你带来帮助。

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

完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题参考文章: (1)完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题 (2)https://www.cnblogs.com/qhanti ...
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
VUE项目学习（四）：编写个人页面和配置路由
VUE项目学习(四):编写个人页面和配置路由 1.准备工作,下载vue项目先配置好node.js开发环境,并使用VUE-Cli下载好VUE项目,具体流程可以参考博客https://blog.csdn ...
Vue 项目中实现的微信、微博、QQ空间分享功能（亲测有效）
需求:文章添加分享功能(包括微信.微博.QQ空间) 如下图所示: 点击图标分别跳转到如下界面:(实现效果如下) 话不多说直接代码(可以封装成组件) <template><div cl ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
Vue返回上一个页面时如何触发上一个页面的方法
Vue返回上一个页面时如何触发上一个页面的方法返回时是利用浏览器的缓存,我们可以利用route不一样来监听. 代码: watch: {$route(now, old) {// 判断逻辑if (now ...
php跳转到另外一个方法,PHP 页面跳转到另一个页面的多种方法方法总结
PHP 页面跳转到另一个页面的多种方法方法总结一用 HTTP 头信息也就是用 PHP 的 HEADER 函数 PHP 里的 HEADER 函数的作用就是向浏览器发出由 HTTP 协议规定的本来应该 ...
JavaScript中,返回上一个页面时,如何保证上一个页面的不刷新?
history.back()和history.go(-1)都可以实现返回上一页并不刷新.History 对象包含用户(在浏览器窗口中)访问过的 URL. history.back() 等同于在浏览器点 ...

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

项目需求

创建水印

创建watermark.js文件

具体实现

第一种做法：在App.vue中引用或其他页面都可以

第二种做法：配置js文件，在main.js文件中引入

注意内容：

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

最新文章

热门文章

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

项目需求

创建水印

创建watermark.js文件

具体实现

第一种做法： 在App.vue中引用或其他页面都可以

第二种做法： 配置js文件，在main.js文件中引入

注意内容：

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

最新文章

热门文章

第一种做法：在App.vue中引用或其他页面都可以

第二种做法：配置js文件，在main.js文件中引入