Watermark 水印
Watermark Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N |
| content | String / Slot / Function | - | 水印所覆盖的内容节点。TS 类型：string | TNode。通用类型定义 | N |
| default | String / Slot / Function | - | 水印所覆盖的内容节点，同 content。TS 类型：string | TNode。通用类型定义 | N |
| height | Number | - | 水印高度 | N |
| isRepeat | Boolean | true | 水印是否重复出现 | N |
| lineSpace | Number | 16 | 行间距，只作用在多行（content 配置为数组）情况下 | N |
| movable | Boolean | false | 水印是否可移动 | N |
| moveInterval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N |
| offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 offset = [gapX / 2, gapY / 2]。TS 类型：Array<number> | N |
| removable | Boolean | true | 水印是否可被删除，默认会开启水印节点防删 | N |
| rotate | Number | -22 | 水印旋转的角度，单位 ° | N |
| watermarkContent | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：WatermarkText|WatermarkImage|Array<WatermarkText|WatermarkImage> | N |
| width | Number | - | 水印宽度 | N |
| x | Number | - | 水印之间的水平间距 | N |
| y | Number | - | 水印之间的垂直间距 | N |
| zIndex | Number | - | 水印元素的 z-index，默认值写在 CSS 中 | N |
WatermarkText
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| fontColor | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N |
| fontSize | Number | 16 | 水印文本文字大小 | N |
| fontWeight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N |
| text | String | - | 水印文本内容 | N |
WatermarkImage
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| isGrayscale | Boolean | false | 水印图片是否需要灰阶显示 | N |
| url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N |
何时使用
当需要对文本、图片或页面等进行版权说明、所属权标识或防盗用时使用。
与布局相关
在布局时，水印以页面内容在页面中的空间分层为参照。需要遮挡内容时，位于内容顶层；需要全部展示内容时，位于内容底层。
图示：位于内容顶层
图示：位于内容底层常见用法
静态水印，一般多个组合平铺使用。常用在整个页面元素均较为重要、不希望被局部截取的场景，如文章、证件、会话窗口等。
动态水印可在页面游走移动，一般独立使用。常用在不便过多干扰、但需要进行标识的场景，如图片、视频等。
推荐/慎用示例
水印会对页面内容有一定干扰，为保持页面的规范性和可读性，应避免在同一区域使用多种不同的水印样式。
