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

参数类型默认值说明
contentstring'Nacr Design'水印文字,支持 \n 换行
gapXnumber100水印水平间距(px)
gapYnumber100水印垂直间距(px)
rotatenumber-22旋转角度(°)
fontSizenumber14文字字号(px)
fontFamilystring'sans-serif'字体
fontWeight'normal' | 'bold' | 'lighter''normal'字重
colorstring'rgba(0,0,0,0.08)'水印颜色
widthnumber120水印单元宽度(px)
heightnumber64水印单元高度(px)
offsetXnumber0水平偏移(px)
offsetYnumber0垂直偏移(px)
imagestring图片水印 URL,设置后优先使用图片
imageWidthnumber0图片宽度(px),0 表示原始宽度
imageHeightnumber0图片高度(px),0 表示原始高度
opacitynumber1水印整体透明度(0~1),值越小越淡
fullscreenbooleanfalse是否全屏显示水印
movablebooleanfalse水印是否持续移动(防截图)

Slots

插槽名说明
default被水印覆盖的内容(fullscreen 模式下无效)