水印 WaterMark
页面上添加特定的文字或图案。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
页面上添加特定的文字或图案。
何时使用
适用于防止信息盗用。
示例
WaterMark
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 水印文字内容 | string | string[] | - |
| fontColor | 水印文字颜色 | string | rgba(0, 0, 0, .15) |
| fontSize | 文字大小 | string | number | 14 |
| fullPage | 是否覆盖整个页面 | boolean | true |
| gapX | 水印之间的水平间距 | number | 24 |
| gapY | 水印之间的垂直间距 | number | 48 |
| height | 水印的高度 | number | 64 |
| image | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string | - |
| imageHeight | 图片高度 | number | 64 |
| imageWidth | 图片宽度 | number | 120 |
| rotate | 水印绘制时，旋转的角度，单位 ° | number | -22 |
| width | 水印的宽度 | number | 120 |
| zIndex | 追加的水印元素的 z-index | number | 2000 |
CSS 变量
| 属性 | 说明 | 默认值 | 全局变量 |
|---|---|---|---|
| --z-index | 水印浮层的 z-index | 2000 | --adm-water-mark-z-index |