2022-12-08 18:06:36 +08:00
|
|
|
---
|
|
|
|
|
category: Components
|
|
|
|
|
subtitle: 水印
|
|
|
|
|
group: 其他
|
|
|
|
|
title: Watermark
|
|
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
|
|
|
|
|
demo:
|
|
|
|
|
cols: 1
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
给页面的某个区域加上水印。
|
|
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
|
|
|
|
- 页面需要添加水印标识版权时使用。
|
|
|
|
|
- 适用于防止信息盗用。
|
|
|
|
|
|
|
|
|
|
## 代码演示
|
|
|
|
|
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
<code src="./demo/basic.tsx">基本</code>
|
|
|
|
|
<code src="./demo/multi-line.tsx">多行水印</code>
|
|
|
|
|
<code src="./demo/image.tsx">图片水印</code>
|
|
|
|
|
<code src="./demo/custom.tsx">自定义配置</code>
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### Watermark
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
| width | 水印的宽度，`content` 的默认值为自身的宽度 | number | 120 | |
|
|
|
|
|
| height | 水印的高度，`content` 的默认值为自身的高度 | number | 64 | |
|
|
|
|
|
| rotate | 水印绘制时，旋转的角度，单位 `°` | number | -22 | |
|
|
|
|
|
| zIndex | 追加的水印元素的 z-index | number | 9 | |
|
|
|
|
|
| image | 图片源，建议导出 2 倍或 3 倍图，优先级高 | string | - | |
|
|
|
|
|
| content | 水印文字内容 | string \| string[] | - | |
|
2022-12-22 14:12:26 +08:00
|
|
|
| font | 文字样式 | [Font](#font) | [Font](#font) | |
|
2022-12-13 15:47:57 +08:00
|
|
|
| gap | 水印之间的间距 | \[number, number\] | \[100, 100\] | |
|
2022-12-08 18:06:36 +08:00
|
|
|
| offset | 水印距离容器左上角的偏移量，默认为 `gap/2` | \[number, number\] | \[gap\[0\]/2, gap\[1\]/2\] | |
|
|
|
|
|
|
|
|
|
|
### Font
|
|
|
|
|
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
| color | 字体颜色 | string | rgba(0,0,0,.15) | |
|
|
|
|
|
| fontSize | 字体大小 | number | 16 | |
|
|
|
|
|
| fontWeight | 字体粗细 | `normal` \| `light` \| `weight` \| number | normal | |
|
|
|
|
|
| fontFamily | 字体类型 | string | sans-serif | |
|
|
|
|
|
| fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal | |
|
