Watermark 水印
为页面或局部容器盖上重复的、平铺的水印。常用于"版权提示 / 数据保密 / 防截图泄露"等场景。
基本使用
把要保护的内容包在 <c-watermark> 里,传入 content。
多行文字
content 传数组时按多行排列。
自定义旋转
rotate 控制旋转角度(默认 -22°,与常见水印一致)。
字体样式
font 接受 color / fontSize / fontWeight / fontStyle / fontFamily。
控制密度
gap 是相邻水印块的水平 / 垂直间距,width / height 是单块水印的盒子尺寸。
图片水印
image 接受图片地址(建议是带透明通道的 PNG / SVG),优先于文字。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| content | string | string[] | '' | 文字水印(数组按多行排列) |
| image | string | '' | 图片水印地址(优先于 content) |
| width | number | 120 | 单个水印块的宽度(px) |
| height | number | 64 | 单个水印块的高度(px) |
| rotate | number | -22 | 旋转角度(度) |
| zIndex | number | 9 | 水印层 z-index |
| gap | [number, number] | [100, 100] | 水印间距 [水平, 垂直] |
| offset | [number, number] | undefined | 偏移量,控制起点位置 |
| font | WatermarkFont | {} | 字体样式(color / fontSize / fontWeight 等) |