vue+watermark-dom实现页面水印效果(示例代码)
作者：水星记_
watermark.js 是基于 DOM 对象实现的 BS 系统的水印,确保系统保密性,安全性,降低数据泄密风险,简单轻量,支持多属性配置,本文将通过 vue 结合 watermark-dom 库,教大家实现简单而有效的页面水印效果,感兴趣的朋友跟随小编一起看看吧
前言
页面水印大家应该都不陌生，它可以用于验证数字媒体的来源和完整性，还可以用于版权保护和信息识别，这些信息可以在不影响媒体质量的情况下嵌入，并在需要时进行提取。本文将通过 vue 结合 watermark-dom 库，教大家实现简单而有效的页面水印效果。
watermark-dom
watermark.js 是基于 DOM 对象实现的 BS 系统的水印，确保系统保密性，安全性，降低数据泄密风险，简单轻量，支持多属性配置，动态计算水印，水印防被删（监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加）。
特性
- 多属性配置，简单易上手；
- 动态计算水印；
- 水印防被删(监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加)；
- 支持
2种导入使用：本地引用，npm引用； - 水印测试工具：
testTool工具； - 内置
3种全局API方法：init()，load(),remove()； - 原理：
pointer-events事件穿透属性，Shadow DOM(影子DOM)，opacity等。
一、安装
npm install watermark-dom
二、引入
import watermark from 'watermark-dom'
三、内置方法
1. watermark.init(setting)
这个方法用于初始化水印，可以设置水印的样式、内容和位置等参数。
栗子
watermark.init({
watermark_txt: '测试水印',
watermark_color: 'gray',
watermark_fontsize: '24px',
})2. watermark.load(setting)
用于手动加载水印。
栗子
const options = {
watermark_txt: '测试水印',
watermark_color: 'gray',
watermark_fontsize: '24px',
}
watermark.load(options)3. watermark.remove()
这个方法用于移除已加载的水印。
栗子
watermark.remove();
四、常用的属性和配置
watermark_id: 'wm_div_id', //水印总体的id watermark_prefix: 'mask_div_id', //小水印的id前缀 watermark_txt:"测试水印", //水印的内容 watermark_x:20, //水印起始位置x轴坐标 watermark_y:20, //水印起始位置Y轴坐标 watermark_rows:0, //水印行数 watermark_cols:0, //水印列数 watermark_x_space:100, //水印x轴间隔 watermark_y_space:50, //水印y轴间隔 watermark_font:'微软雅黑', //水印字体 watermark_color:'black', //水印字体颜色 watermark_fontsize:'18px', //水印字体大小 watermark_alpha:0.15, //水印透明度，要求设置在大于等于0.005 watermark_width:100, //水印宽度 watermark_height:100, //水印长度 watermark_angle:15, //水印倾斜度数 watermark_parent_width:0, //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值） watermark_parent_height:0, //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值） watermark_parent_node:null //水印插件挂载的父元素element,不输入则默认挂在body上
五、实例代码
<template>
<div style="height:100vh"></div>
</template>
<script>
import watermark from 'watermark-dom'
export default {
mounted() {
const watermarkText = '测试水印内容'
const options = {
watermark_txt: watermarkText,
watermark_color: 'gray',
watermark_fontsize: '14px',
watermark_alpha: 0.5,
watermark_angle: 15,
watermark_width: 100,
watermark_height: 20,
}
watermark.load(options)
},
}
</script>实现效果
六、非全屏展示
watermark_parent_node 属性用于指定水印的父节点，即确定水印应该显示在哪个 DOM 元素的内部。通过设置 watermark_parent_node 属性，可以控制水印的显示位置和范围。例如，如果你想要将水印显示在特定的 div 元素内部，可以将该 div 元素作为 watermark_parent_node。这样，水印将被限制在该 div 元素的范围内显示。
<template>
<div class="box">
<div class="topBox"></div>
<div id="watermarkId" class="cenBox"></div>
<div class="bomBox"></div>
</div>
</template>
<script>
import watermark from 'watermark-dom'
export default {
mounted() {
const watermarkText = '测试水印内容'
const options = {
watermark_txt: watermarkText,
watermark_color: 'gray',
watermark_fontsize: '14px',
watermark_alpha: 0.5,
watermark_angle: 15,
watermark_width: 100,
watermark_height: 20,
watermark_parent_node: 'watermarkId',
}
watermark.load(options)
},
}
</script>
<style scoped>
.box {
width: 100%;
height: 100vh;
}
.topBox {
height: 30vh;
background: cadetblue;
}
.cenBox {
height: 50vh;
}
.bomBox {
height: 20vh;
background: cornflowerblue;
}
</style>实现效果
到此这篇关于vue+watermark-dom实现页面水印效果的文章就介绍到这了,更多相关vue watermark-dom页面水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！