Watermark 水印
在页面上添加文字或图片水印,用于版权保护、信息标识或防止截图。支持多行文字、图片水印、全屏模式及动态移动效果。
基础用法
通过 content 设置水印文字,默认覆盖在子内容上方。
这里是被水印覆盖的内容区域,水印文字会铺满整个容器。
水印默认半透明,不会严重影响内容阅读。
多行文字
content 中使用 \\n 换行符即可生成多行水印文字。
多行水印适用于同时展示公司名称和安全等级等复合信息。
自定义样式
通过 gapX / gapY 调整间距,rotate 旋转角度,fontSize / color / fontWeight 控制文字外观。
红色加粗倾斜水印,适用于机密文件场景。
图片水印
通过 image 属性指定图片 URL 作为水印,imageWidth / imageHeight 控制图片大小。
使用图片替代文字作为水印标识。
偏移位置
通过 offsetX / offsetY 调整水印的起始渲染位置。
水印整体向右偏移 40px,向下偏移 30px。
自定义透明度
通过 opacity 控制水印整体透明度,取值 0~1,值越小水印越淡。
透明度 0.3 — 水印较淡
透明度 0.7 — 水印较浓
动态水印
设置 movable 使水印持续平移,增加防截图难度。
水印正在缓慢移动,可以有效防止静态截图盗用。
全屏水印
设置 fullscreen 后水印覆盖整个视口,不限于容器范围。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | string | 'Nacr Design' | 水印文字,支持 \n 换行 |
gapX | number | 100 | 水印水平间距(px) |
gapY | number | 100 | 水印垂直间距(px) |
rotate | number | -22 | 旋转角度(°) |
fontSize | number | 14 | 文字字号(px) |
fontFamily | string | 'sans-serif' | 字体 |
fontWeight | 'normal' | 'bold' | 'lighter' | 'normal' | 字重 |
color | string | 'rgba(0,0,0,0.08)' | 水印颜色 |
width | number | 120 | 水印单元宽度(px) |
height | number | 64 | 水印单元高度(px) |
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 | 水印是否持续移动(防截图) |
Slots
| 插槽名 | 说明 |
|---|---|
default | 被水印覆盖的内容(fullscreen 模式下无效) |