vue全局水印方法

前言，做项目的时候有遇到全局加水印的需求，特此分享

1.需要涉及到的有这几个组件

 其中waterMark.js

let setWatermark = (str) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.getElementById("main-content").removeChild(document.getElementById(id))}let can = document.createElement('canvas')// 设置canvas画布大小can.width = 220can.height = 120let cans = can.getContext('2d')cans.rotate(-20 * Math.PI / 180) // 水印旋转角度cans.font = '14px Vedana'cans.fillStyle = '#666666'cans.textAlign = 'center'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 2, can.height) // 水印在画布的位置x，y轴// cans.fillText(str2, can.width / 2, can.height + 22)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '40px'div.style.right = '0px'div.style.opacity = '0.15'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width =  document.getElementById("main-content").clientWidth + 'px'div.style.height =  document.getElementById("main-content").clientHeight  + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'document.getElementById("main-content").appendChild(div)return id}// 添加水印方法export const setWaterMark = (str) => {console.log(666, document.body, document.getElementById("main-content"));let id = setWatermark(str)if (document.getElementById(id) === null) {id = setWatermark(str)}}// 移除水印方法export const removeWatermark = () => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.getElementById("main-content").removeChild(document.getElementById(id))}}

 APP.vue中  ：

import { setWaterMark } from "@/utils/waterMark.js"; 

setWaterMark,

basic-layout/index 里：

 成了之后是这样的，浅看一下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！