自己做的网站图片挡住了导航栏,无锡网站推广哪家公司好,电子商务毕业设计设计网站建设,北京网站优化校学费前言 页面水印大家应该都不陌生#xff0c;它可以用于验证数字媒体的来源和完整性#xff0c;还可以用于版权保护和信息识别#xff0c;这些信息可以在不影响媒体质量的情况下嵌入#xff0c;并在需要时进行提取。本文将通过 vue 结合 watermark-dom 库#xff0c;教大…前言 页面水印大家应该都不陌生它可以用于验证数字媒体的来源和完整性还可以用于版权保护和信息识别这些信息可以在不影响媒体质量的情况下嵌入并在需要时进行提取。本文将通过 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上五、实例代码
templatediv styleheight:100vh/div
/templatescript
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 元素的范围内显示。
templatediv classboxdiv classtopBox/divdiv idwatermarkId classcenBox/divdiv classbomBox/div/div
/templatescript
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实现效果
