vue怎么更换自定义水印(Vue之全局水印的实现示例)
类别:编程学习 浏览量:1837
时间:2021-10-04 01:38:09 vue怎么更换自定义水印
Vue之全局水印的实现示例目录
- 1.创建水印Js文件
- 2.引入操作
- 2.1 在App.vue中引用或其他页面
- 2.2 在router配置文件中引用
【需求】系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印)
/* * @Author: 刘小二 * @Date: 2021-07-15 14:43:27 * @LastEditTime: 2021-07-15 15:00:27 * @LastEditors: Please set LastEditors * @Description: 添加水印 * @FilePath: /huashijc_MeetingSys/src/common/warterMark.js */ 'use strict' let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') can.width = 250 can.height = 120 let cans = can.getContext('2d') cans.rotate(-15 * Math.PI / 150) cans.font = '20px Vedana' cans.fillStyle = 'rgba(200, 200, 200, 0.20)' cans.textAlign = 'left' cans.textBaseline = 'Middle' cans.fillText(str, can.width / 8, can.height / 2) let li = document.createElement('li') li.id = id li.style.pointerEvents = 'none' li.style.top = '35px' li.style.left = '0px' li.style.position = 'fixed' li.style.zIndex = '100000' li.style.width = document.documentElement.clientWidth + 'px' li.style.height = document.documentElement.clientHeight + 'px' li.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' document.body.appendChild(li) return id } // 该方法只允许调用一次 watermark.set = (str) => { let id = setWatermark(str) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) window.onresize = () => { setWatermark(str) } } const outWatermark = (id) => { if (document.getElementById(id) !== null) { const li = document.getElementById(id) li.style.display = 'none' } } watermark.out = () => { const str = '1.23452384164.123412415' outWatermark(str) } export default watermark
2.1 在App.vue中引用或其他页面
// 1.在App.vue文件中,导入该文件 import Watemark from '@/common/watermark'; computed: { userName() { const name = this.$store.state.user.name return (name && name.length > 0) ? name : '未获取到用户名' } }, mounted() { Watermark.set(this.userName) } // 2.在其他页面引用 import Watemark from '@/common/watermark'; created() { Watermark.set('admin') }
2.2 在router配置文件中引用
const outWatermark = (id) => { if (document.getElementById(id) !== null) { const li = document.getElementById(id) li.style.display = 'none' } } router.afterEach((to) => { if(to.path == '/'){ Watermark.out() // 清除水印 }else{ Watermark.set('未获取到用户名') // 设置水印title } });
到此这篇关于Vue之全局水印的实现示例的文章就介绍到这了,更多相关Vue 全局水印内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuefor指令使用教程(Vue必学知识点之forEach的使用)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vue左右滑动切换(vue实现界面滑动效果)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue监控对象变化(Vue之监听方法案例详解)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vue高阶组件怎么用(vue更多筛选项小组件使用详解)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
- 它荣获 中国生态魅力镇 称号 就在咱们禹州,一起来看看(中国生态魅力镇)
- 真牛 禹州将建成中等城市(禹州将建成中等城市)
- 被骂欺师灭祖,与郭德纲公开叫板,何云伟改名何沄伟,开始画画了(与郭德纲公开叫板)
- 相声转行影帝,被何晴抛弃,甩10年女友闪婚生子,刘威不靠谱情史(相声转行影帝被何晴抛弃)
热门推荐
- nginx做图片服务器代理(使用nginx动态转换图片大小生成缩略图)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- javascript基本类型是哪些(详解javascript中的Strict模式)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- iview 全局初始化组件(iview 权限管理的实现)
- php异常和错误区别(PHP批斗大会之缺失的异常详解)
- python中的pandas功能(Python常见的pandas用法demo示例)
- ucenter安装配置(使用ucenter实现多站点同步登录的讲解)
- MVC中JavaScriptResult
- python使用教程操作(详解python中@的用法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9