vue全局加水印（除登录页面）

需求：给所有除登录以外的页面加上水印。水印信息为姓名+手机号（这部分信息可以从后端获取动态展示，也可以静态给水印赋值内容）下面基于这两种情况分别给出不同方法。

两种方案都需要做的动作：

1、在src下创建目录utils

2、在utils目录创建一个waterMark.js文件

//waterMark.js文件let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412416';if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}//创建一个画布let can = document.createElement('canvas');//设置画布的长宽can.width = 120;can.height = 120;let cans = can.getContext('2d');//旋转角度cans.rotate(-15 * Math.PI / 180);cans.font = '18px Vedana';//设置填充绘画的颜色、渐变或者模式cans.fillStyle = 'rgba(200, 200, 200, 0.40)';//设置文本内容的当前对齐方式cans.textAlign = 'left';//设置在绘制文本时使用的当前文本基线cans.textBaseline = 'Middle';//在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）cans.fillText(str, can.width / 8, can.height / 2);let div = document.createElement('div');div.id = id;div.style.pointerEvents = 'none';div.style.top = '30px';div.style.left = '0px';div.style.position = 'fixed';div.style.zIndex = '100000';div.style.width = document.documentElement.clientWidth + 'px';div.style.height = document.documentElement.clientHeight + '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;

方案一静态设置水印

1、如果想要在登录界面也想显示水印，就可在在APP.vue文件中导入waterMark.js文件，在mounted函数中调用warterMark;

代码如下：

<script>import warterMark from './utils/warterMark.js';export default {mounted: function() {warterMark.set("水印")},}
</script>

2、如果登录页面不显示水印，则需要在main.js文件中导入warterMark.js文件，route.beforeEach()方法中判断是否为登录页面，最后调用水印方法。

代码如下：

import warterMark from './utils/warterMark.js';router.afterEach((item) =>{if(item.name !== 'login'){warterMark.set("水印")}    })

方案二动态设置水印

如果我们要用当前用户信息（例如姓名、id、手机号）作为水印内容，而用户信息一般存储在vuex里方便全局调用，那么在APP.vue中的mounted函数很可能获取不到vuex中的用户信息。

解决这个问题可以在main.js文件中使用route.beforeEach()方法中判断是否为登录页面，不是则并在此方法中调用水印方法

1、在login.vue文件获取用户信息，并存入vuex。

代码如下：

<script>import {mapMutations} from 'vuex'; //引入vuex的方法name: "login",data() {return {userCname:'' //用户中文名userPhoneNum:'' //用户手机号}},beforeCreate() {_this.setUserMassage() //接收数据的方法}，method:{login(){var _this = this_this.axios.get('//接口地址', {params: {参数传递}}).then((res) => {console.log(res.data)_this.setUserMassage({ //userPhoneNum:用户手机号,userCname:用户中文名,});}).catch(function (err) {})},...mapMutations('home', ['setUserMassage']),//存入vuex}

2.在store中新建home.js文件

代码如下：

const state = {userMassage:{},}const getters = {}const actions = {}const mutations = {setUserMassage(state,userMassage){state.userMassage=userMassage},}export default {namespaced: true,state,getters,actions,mutations}

3、在main.js文件中引用水印方法

代码如下：

router.afterEach((item) =>{//warterMark.set("水印")if(item.name !== 'login'){    //判断是否为登录页面warterMark.set(store.state.home.userMassage.userCname+''+store.state.home.userMassage.userPhoneNum)}    })

至此就可以实现水印效果啦!

vue全局加水印（除登录页面）相关推荐

vue搭建项目、创建登录页面和后台交互之引入axios
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2 ...
html中加水印,静态html页面添加水印效果且水印不可复制
1 2 3 4 5 //调整iframe高度 6 functioniFrameHeight() {7 varifm=document.getElementById("iframepage&q ...
vue项目云e办——登录页面（一）
云e办文章目录云e办视频学习地址前端目标效果登录页面代码视频学习地址云e办视频学习地址前端目标表单可以校验是否为空,如果为空,点击登录时弹出错误提示框. 效果登录页面代码登录页 ...
Vue实现一个简单的登录页面【自定义】
创建一个自定义插件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
html表格中加水印,给html页面添加水印
functionwatermark(settings) {//默认设置 var defaultSettings ={ watermark_txt:"text", watermark ...
vue通用后台管理（登录页面）
1.这里是一个form表单,有两个表单域一个是用户名,一个是密码 ,还有一个底部的 button 按钮,点击button会将表单的内容提交到我们的后端. 2.找到router下的index.js ...
华为S2300系列交换机：加载web登录页面
参考文章:华为S2326交换机WEB管理配置 . 如何配置华为交换机WEB管理 . 华为交换机FTP上传文件 .V100R006C05 Web网管操作指南本文操作来自以上链接 1.配置设备管理IP( ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

vue全局加水印（除登录页面）

vue全局加水印（除登录页面）相关推荐

最新文章

热门文章