Appearance
Watermark 水印
给页面的某个区域加上水印，支持文字和图片水印，具有防篡改功能。
基础用法
最简单的用法。
多行文字
通过设置 content 为数组来实现多行文字水印。
透明度对比
通过调整 alpha 属性来控制水印的透明度。
旋转角度
通过 rotate 属性设置水印的旋转角度。
图片水印
通过设置 image 属性来使用图片作为水印。
自定义配置
通过设置各种属性来自定义水印的样式。
间距设置
通过 gap 属性调整水印之间的间距。
字体样式
自定义水印的字体大小、颜色和样式。
防篡改
水印组件具有防篡改功能，当水印被删除或修改时会自动恢复并触发 change 事件。
禁用状态
通过 disabled 属性可以禁用水印显示。
实际应用场景
以下是一些常见的水印应用场景示例。
文档保护
API
Watermark Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| content | 水印文字内容，支持单行或多行文字 | string / string[] | — | '' |
| image | 水印图片地址，设置后将显示图片水印 | string | — | '' |
| width | 水印区域宽度（像素） | number | — | 120 |
| height | 水印区域高度（像素） | number | — | 64 |
| rotate | 水印旋转角度（度数），正数顺时针，负数逆时针 | number | — | -22 |
| z-index | 水印元素的层级 | number | — | 9 |
| alpha | 水印透明度，0为完全透明，1为完全不透明 | number | 0-1 | 0.5 |
| font-size | 文字水印的字体大小（像素） | number | — | 16 |
| font-color | 文字水印的字体颜色 | string | — | 'rgba(0,0,0,.15)' |
| font-style | 文字水印的字体样式 | string | normal / italic / oblique | 'normal' |
| font-weight | 文字水印的字体粗细 | string / number | normal / bold / 100-900 | 'normal' |
| font-family | 文字水印的字体系列 | string | — | 'sans-serif' |
| gap | 水印之间的间距 [水平间距, 垂直间距] | [number, number] | — | [100, 100] |
| offset | 水印的偏移量 [水平偏移, 垂直偏移] | [number, number] | — | [0, 0] |
| disabled | 是否禁用水印显示 | boolean | — | false |
Watermark Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 水印被篡改时触发（如删除、修改水印元素） | (event: Event) |
Watermark Slots
| 插槽名 | 说明 |
|---|---|
| default | 需要添加水印的内容区域 |
注意事项
- 优先级：当同时设置
content和image时，image优先级更高 - 性能：水印使用 Canvas 生成，大量水印可能影响性能
- 防篡改：组件使用 MutationObserver 监控 DOM 变化，自动恢复被删除的水印
- 响应式：水印会根据容器大小自动调整显示区域
- 兼容性：需要浏览器支持 Canvas API 和 MutationObserver API