【需求】系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印)
1.创建水印Js文件
- /*
- * @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 div = document.createElement('div')
- div.id = id
- div.style.pointerEvents = 'none'
- div.style.top = '35px'
- 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)
- }
- }
-
- const outWatermark = (id) => {
- if (document.getElementById(id) !== null) {
- const div = document.getElementById(id)
- div.style.display = 'none'
- }
- }
- watermark.out = () => {
- const str = '1.23452384164.123412415'
- outWatermark(str)
- }
-
- export default watermark
2.引入操作
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 div = document.getElementById(id)
- div.style.display = 'none'
- }
- }
-
- router.afterEach((to) => {
- if(to.path == '/'){
- Watermark.out() // 清除水印
- }else{
- Watermark.set('未获取到用户名') // 设置水印title
- }
- });
-
到此这篇关于Vue之全局水印的实现示例的文章就介绍到这了,更多相关Vue 全局水印内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!