水印效果

全屏水印
指定容器水印

使用方法

项目中新建一个 watermark.js 文件

let watermark = {};let setWatermark = (text, sourceBody) => {let id =Math.random() * 10000 +"-" +Math.random() * 10000 +"/" +Math.random() * 10000;if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}let can = document.createElement("canvas");can.width = 120; //设置水印之间的左右间距can.height = 80; //设置水印之间的上下间距let cans = can.getContext("2d");cans.rotate((-20 * Math.PI) / 180);cans.font = "15px Vedana";cans.fillStyle = "rgba(0, 0, 0, .5)";cans.textAlign = "left";cans.textBaseline = "Middle";cans.fillText(text, can.width / 20, can.height);let water_div = document.createElement("div");water_div.id = id;water_div.className = "watermarkClass";water_div.style.pointerEvents = "none";water_div.style.background ="url(" + can.toDataURL("image/png") + ") left top repeat";if (sourceBody) {water_div.style.width = "100%";water_div.style.height = "100%";sourceBody.appendChild(water_div);} else {water_div.style.top = "3px";water_div.style.left = "0px";water_div.style.position = "fixed";water_div.style.zIndex = "100000";water_div.style.width = document.documentElement.clientWidth + "px";water_div.style.height = document.documentElement.clientHeight + "px";document.body.appendChild(water_div);}return id;
};/***  该方法只允许调用一次*  @param:*  @text == 水印内容*  @sourceBody == 水印添加的位置，不传就是body* */
watermark.set = (text, sourceBody) => {const domArr = Array.from(document.getElementsByClassName("watermarkClass"));for (let i = 0; i < domArr.length; i++) {const element = domArr[i];// element.parentNode.removeChild(element);element.remove();}if (text == "") {return;}setWatermark(text, sourceBody);// let id = setWatermark(text, sourceBody);// setInterval(() => {//   if (document.getElementById(id) === null) {//     id = setWatermark(text, sourceBody);//   }// }, 2000);// window.onresize = () => {//   setWatermark(text, sourceBody);// };
};export default watermark;

main.js 中引入 watermark.js

// 引入水印文件地址
import watermark from './util/watermark.js'
Vue.prototype.$watermark = watermark

页面中使用
this.$watermark.set(text，dom)

参数	说明	是否必填
text	水印内容	是
dom	水印容器。若不传，则全屏水印，若传，则指定容器。	否

（1）全屏水印

<template><div class="page"></div>
</template><script>
export default {data() {return {};},mounted(){this.$watermark.set("水印")},beforeDestroy() {this.$watermark.set("");}
};
</script><style scoped>
.page{width: 100%;height: 100%;background-color: skyblue;
}
</style>

（2）指定容器水印

<template><div class="page"><div ref="content" style="width: 500px;height: 500px;border: 2px solid red;"></div></div>
</template><script>
export default {data() {return {};},mounted(){this.$watermark.set("水印",this.$refs.content)},beforeDestroy() {this.$watermark.set("",this.$refs.content);}
};
</script><style scoped>
.page{width: 100%;height: 100%;background-color: skyblue;
}
</style>

Vue - 页面添加水印效果相关推荐

vue 页面添加水印并在浏览器不能去除
创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412416 ...
Vue 页面引导效果(首次登录新用户引导) driver.js 引导页
轻量级.无依赖的原生 JavaScript 引擎,可将用户的注意力集中在整个页面上:这是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库. 简介及使用教程 Driver.js是 ...
html中加水印,静态html页面添加水印效果且水印不可复制
1 2 3 4 5 //调整iframe高度 6 functioniFrameHeight() {7 varifm=document.getElementById("iframepage&q ...
vue 项目中添加水印效果
在项目中有给部分区域或者是整个页面添加水印的需求.加水印其实很简单,它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式,然后将转换后的图片设置为背景图,从而实 ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
vue项目中添加水印效果
基于vue的架构中,在网页中添加水印效果,具体实现代码如下: 新建js文件:例如warterMark.js 'use strict'let watermark = {}let setWatermar ...
在vue页面中使用伪元素进行气泡框创建|选中效果自定义|滚动条自定义
在vue页面中使用伪元素进行气泡框|单选框自定义|滚动条自定义 1. 基于vue,使用到的图标是element plus 2. vue单页面代码 <template><h1> ...
vue项目添加水印，防止刷新页面水印消失
引入一个waterMark.js文件之后 IE各种问题问题1:页面出现空白,登录页面都没有显示出来问题2:IE低版本(11以下)总是报语法错误问题1出现的原因是js文件包含箭头函数问题2出现的 ...

Vue - 页面添加水印效果

Vue 页面中使用水印效果

水印效果

使用方法

Vue - 页面添加水印效果相关推荐

最新文章

热门文章