vue中将水印加在页面的某一部分

页面某一部分加水印的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 = 150can.height = 150let cans = can.getContext('2d')cans.rotate(-30 * Math.PI / 180)cans.font = '16px "Avenir", Helvetica, Arial, sans-serif'cans.fillStyle = 'rgba(200, 200, 200, 0.20)'cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 5, can.height / 2)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'//水印的位置以及水印的宽高div.style.top = '40px'div.style.left = '-30px'div.style.position = 'absolute'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth - 100 + 'px'//获取id为table元素的高度，动态展示水印的高度div.style.height = document.getElementById("table").clientHeight - 20 + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'// 将水印放在id为show的元素里面，解决水印整个页面展示的效果。document.getElementById("show").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

在需要的页面中引入该js，并在mounted中加入watermark.set(“值”)，在不需要的页面中加入watermark.set("")，清除水印（因为水印设置一次，其他页面也会有水印）。示例如下：

mounted() {watermark.set("值")
}

补充，show的样式为position:relative;z-index: 99; 否则水印会全屏。

其他页面无水印的情况：

//有id为show时，添加水印。
if(document.getElementById("show")) {document.getElementById("show").appendChild(div)
}

vue中将水印加在页面的某一部分相关推荐

vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...
Vue实现动态加载页面数据（下拉加载新数据）
1 设置数据 //页面不同组的所有数据alldata:[],//当前的页数page: 1, 2 更新页面格式 <div > <d ...
vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
[vue] 第一次加载页面时会触发哪几个钩子？
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Vue之鼠标悬停显示页面加载时间
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
vue调用接口获取后台数据_使用Vue实现调用接口加载页面初始数据
使用Vue实现调用接口加载页面初始数据闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'' ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
html表格中加水印,给html页面添加水印
functionwatermark(settings) {//默认设置 var defaultSettings ={ watermark_txt:"text", watermark ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...

vue中将水印加在页面的某一部分

vue中将水印加在页面的某一部分相关推荐

最新文章

热门文章