Watermark 水印
在页面上添加特定的文字或图案作为水印,可用于防止信息盗用。
图片水印
自定义间隔
自定义倾斜角度
显示范围
HTML 水印
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 水印宽度 | number | 100 |
| height | 水印高度 | number | 100 |
| z-index | 水印的 z-index | number | string | 100 |
| content | 文字水印的内容 | string | - |
| image | 图片水印的内容,如果与 content 同时传入,优先使用图片水印 | string | - |
| rotate | 水印的旋转角度 | number | string | -22 |
| full-page | 水印是否全屏显示 | boolean | false |
| gap-x | 水印之间的水平间隔 | number | 0 |
| gap-y | 水印之间的垂直间隔 | number | 0 |
| text-color | 文字水印的颜色 | string | #dcdee0 |
| opacity | 水印的透明度 | number | string | - |
Slots
| 名称 | 说明 |
|---|---|
| content | HTML 水印的内容,仅支持行内样式,同时不支持传入自闭合标签,优先级高于 content 或 image 属性 |
类型定义
组件导出以下类型定义:
ts
import type { WaterProps } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-watermark-z-index | 100 | 根节点的 z-index 层级 |
