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 全局水印内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
- 彩礼重要吗()
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
热门推荐
- ftp文件操作三种类型(详解ftp创建文件权限问题)
- nginx 怎么搭建web服务器(Linux+Nginx+Php架设高性能WEB服务器)
- linux中ipconfig命令的功能(Linux ipcs命令的使用)
- 比较好用的安装包制作工具 Advanced Installer
- jenkins集成docker自动部署(详解docker部署Jenkins新手使用教程)
- thinkphp5框架怎么打开(thinkphp5.1框架模板布局与模板继承用法分析)
- css无效的常见原因
- ConcurrentDictionary与Dictionary的区别
- 如何增大docker内存使用(docker 内存监控与压测方式)
- php如何将数组清空(PHP实现数组向任意位置插入,删除,替换数据操作示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9