Watermark 水印
在页面上添加文字或图片水印,用于版权保护、信息标识或防止截图。支持多行文字、图片水印、全屏模式、密度预设及动态移动效果。
基础用法
通过 content 设置水印文字,默认覆盖在子内容上方。
这里是被水印覆盖的内容区域,水印文字会铺满整个容器。
水印默认半透明,不会严重影响内容阅读。
多行文字
content 中使用 \\n 换行符即可生成多行水印文字。
多行水印适用于同时展示公司名称和安全等级等复合信息。
密度预设
通过 density 快速调整水印疏密程度,支持 sparse(稀疏)、default(默认)、dense(密集)三种预设。也可配合 gapX / gapY 手动微调。
sparse — 稀疏
水印间距较大,适合对阅读干扰要求低的场景。
default — 默认
标准间距,适用于大多数业务场景。
dense — 密集
水印密集排列,防截图效果更强。
自定义样式
通过 gapX / gapY 调整间距,rotate 旋转角度,fontSize / color / fontWeight 控制文字外观。
红色加粗倾斜水印,适用于机密文件场景。
图片水印
通过 image 属性指定图片 URL 作为水印,imageWidth / imageHeight 控制图片大小。
使用图片替代文字作为水印标识。
偏移位置
通过 offsetX / offsetY 调整水印的起始渲染位置。
水印整体向右偏移 40px,向下偏移 30px。
自定义透明度
通过 opacity 控制水印整体透明度,取值 0~1,值越小水印越淡。
透明度 0.3 — 水印较淡
透明度 0.7 — 水印较浓
动态水印
设置 movable 使水印持续平移,增加防截图难度。
水印正在缓慢移动,可以有效防止静态截图盗用。
滚动容器水印
水印覆盖整个可滚动区域,滚动时水印始终可见。
第 1 行内容 — 水印始终覆盖滚动区域,不会消失。
第 2 行内容 — 水印始终覆盖滚动区域,不会消失。
第 3 行内容 — 水印始终覆盖滚动区域,不会消失。
第 4 行内容 — 水印始终覆盖滚动区域,不会消失。
第 5 行内容 — 水印始终覆盖滚动区域,不会消失。
第 6 行内容 — 水印始终覆盖滚动区域,不会消失。
第 7 行内容 — 水印始终覆盖滚动区域,不会消失。
第 8 行内容 — 水印始终覆盖滚动区域,不会消失。
第 9 行内容 — 水印始终覆盖滚动区域,不会消失。
第 10 行内容 — 水印始终覆盖滚动区域,不会消失。
第 11 行内容 — 水印始终覆盖滚动区域,不会消失。
第 12 行内容 — 水印始终覆盖滚动区域,不会消失。
第 13 行内容 — 水印始终覆盖滚动区域,不会消失。
第 14 行内容 — 水印始终覆盖滚动区域,不会消失。
第 15 行内容 — 水印始终覆盖滚动区域,不会消失。
第 16 行内容 — 水印始终覆盖滚动区域,不会消失。
第 17 行内容 — 水印始终覆盖滚动区域,不会消失。
第 18 行内容 — 水印始终覆盖滚动区域,不会消失。
第 19 行内容 — 水印始终覆盖滚动区域,不会消失。
第 20 行内容 — 水印始终覆盖滚动区域,不会消失。
全屏水印
设置 fullscreen 后水印覆盖整个页面,不限于容器范围。水印随页面滚动始终可见。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | string | 'Nacr Design' | 水印文字,支持 \n 换行 |
density | 'sparse' | 'default' | 'dense' | 'default' | 密度预设:sparse 稀疏、default 默认、dense 密集。设置后会自动调整 gapX/gapY/width/height/fontSize,也可单独覆盖 |
gapX | number | 100 | 水印水平间距(px),设置后覆盖 density 对应值 |
gapY | number | 100 | 水印垂直间距(px),设置后覆盖 density 对应值 |
rotate | number | -22 | 旋转角度(°) |
fontSize | number | 14 | 文字字号(px),设置后覆盖 density 对应值 |
fontFamily | string | 'sans-serif' | 字体 |
fontWeight | 'normal' | 'bold' | 'lighter' | 'normal' | 字重 |
color | string | 'rgba(0,0,0,0.08)' | 水印颜色 |
width | number | 120 | 水印单元宽度(px),设置后覆盖 density 对应值 |
height | number | 64 | 水印单元高度(px),设置后覆盖 density 对应值 |
offsetX | number | 0 | 水平偏移(px) |
offsetY | number | 0 | 垂直偏移(px) |
image | string | — | 图片水印 URL,设置后优先使用图片 |
imageWidth | number | 0 | 图片宽度(px),0 表示原始宽度 |
imageHeight | number | 0 | 图片高度(px),0 表示原始高度 |
opacity | number | 1 | 水印整体透明度(0~1),值越小越淡 |
fullscreen | boolean | false | 是否全屏显示水印(覆盖整个文档页面) |
movable | boolean | false | 水印是否持续移动(防截图) |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
density-change | (density: 'sparse' | 'default' | 'dense') => void | 密度预设变化时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 被水印覆盖的内容(fullscreen 模式下无效) |