Skip to content

Watermark 水印

为页面或局部容器盖上重复的、平铺的水印。常用于"版权提示 / 数据保密 / 防截图泄露"等场景。

基本使用

把要保护的内容包在 <c-watermark> 里,传入 content

多行文字

content 传数组时按多行排列。

自定义旋转

rotate 控制旋转角度(默认 -22°,与常见水印一致)。

字体样式

font 接受 color / fontSize / fontWeight / fontStyle / fontFamily

控制密度

gap 是相邻水印块的水平 / 垂直间距,width / height 是单块水印的盒子尺寸。

图片水印

image 接受图片地址(建议是带透明通道的 PNG / SVG),优先于文字。

API

Props

参数类型默认值说明
contentstring | string[]''文字水印(数组按多行排列)
imagestring''图片水印地址(优先于 content
widthnumber120单个水印块的宽度(px)
heightnumber64单个水印块的高度(px)
rotatenumber-22旋转角度(度)
zIndexnumber9水印层 z-index
gap[number, number][100, 100]水印间距 [水平, 垂直]
offset[number, number]undefined偏移量,控制起点位置
fontWatermarkFont{}字体样式(color / fontSize / fontWeight 等)

Released under the MIT License.