组件 · 数据展示
Watermark 水印
内容水印覆盖层。
使用建议
- 避免：用 CSS 伪元素手写替代却声称同一 API
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import { Watermark } from '@selrux/ui/watermark';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
受水印保护的内容区域。
代码演示
基础用法
content 为水印文字，平铺在子内容上。
受水印保护的内容区域。
多行与参数
content 传数组为多行；gap、rotate 调整间距与角度。
多行水印
文字样式与布局
width / height 单个水印尺寸；offset 偏移；gap 间距；font 字体（颜色、字号、字重）；lineHeight；cross 交错排列；globalRotate 整体旋转；zIndex 层级；selectable 允许选中下层文字。
本页面包含客户敏感信息，请勿外传。
图片水印与全屏
image 使用图片，imageWidth / imageHeight / imageOpacity 控制尺寸与透明度；fullscreen 覆盖整个视口（演示中关闭）；onRemove 在水印节点被移除时回调（防篡改）。
图片水印区域
API
属性覆盖：示例用到 18 / 18 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Watermark
主题化水印容器；平铺层与全屏布局由 srx-watermark* 类承担。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
content | 文字水印内容。
字符串中的 \n 会拆成多行；与 image 同时存在时优先绘制图片，图片失败时可回退文字。 | WatermarkContent | readonly WatermarkContent[] | - |
image | 图片水印地址（支持 base64）；建议 2x/3x 图。 | string | - |
width | 水印单元宽度（CSS px）；文字默认约等于内容宽度，图片默认 120。 | number | 120 |
height | 水印单元高度（CSS px）；文字默认约等于内容高度，图片默认 64。 | number | 64 |
rotate | 旋转角度（度）；默认 -22。 | number | -22 |
zIndex | 水印层 z-index；默认 9。 | number | 9 |
gap | 水印间距 [水平, 垂直]；默认 [100, 100]（≡ Naive xGap/yGap）。 | readonly [number, number] | - |
offset | 相对容器左上角的偏移 [水平, 垂直]。
默认各为对应 gap 的一半（≡ Naive xOffset/yOffset）。 | readonly [number, number] | - |
font | 全局文字样式。 | WatermarkFont | - |
lineHeight | 多行垂直步进（px）；缺省由字号推导（约 fontSize * 1.2）。
对齐 Naive lineHeight。 | number | - |
imageWidth | 图片绘制宽度；缺省等于 width（或图片默认宽）。 | number | - |
imageHeight | 图片绘制高度；缺省等于 height（或图片默认高）。 | number | - |
imageOpacity | 图片水印透明度，0–1；默认 1。 | number | 1 |
cross | 交错铺排；在 tile 内生成交错副本（对齐 Naive cross + Ant 填充）。 | boolean | - |
fullscreen | 全屏固定覆盖视口；默认 false。 | boolean | false |
globalRotate | 整层 CSS 旋转角度（度）；默认 0。
与单元 rotate 不同：作用于 mark 层整体。 | number | 0 |
selectable | 被水印覆盖的内容是否可选中；默认 true。 | boolean | true |
onRemove | 水印 DOM 被外部移除并触发恢复时回调。
对齐 Ant onRemove；组件自身卸载不触发。 | (() => void) | - |
children | 被水印覆盖的内容。 | ReactNode | - |
另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：WatermarkContent、WatermarkFont、WatermarkProps、WatermarkText