Watermark 水印
在页面上添加特定的文字或图案。
基础用法
最基本的使用
多行水印
使用 “content” 设置字符串数组来指定多行文字水印内容。
图片水印
通过 ‘image’ 指定图片地址。 为保证图片高清不拉伸，请设置 ‘width’ 和 ‘height’，并上传至少两倍 ‘width’ 和 ‘height’ 的 LOGO 图片地址。
自定义配置
通过配置自定义参数，预览水印效果。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| width | 水印的宽度, `content` 的默认值为它自身的宽度 | number | 120 |
| 高度 | 水印的高度, `content` 的默认值为它自身的高度 | number | 64 |
| 旋转 | 水印绘制时，旋转的角度，单位 `°` | number | -22 |
| z-index | 追加的水印元素的 z-index | number | 9 |
| 图片 | 图片源，建议导出 2x 或 3x 的图片，优先级高 | string | — |
| content | 水印文字内容 | string/object | Element Plus |
| 字体 | 文字样式 | 字体 | 字体 |
| 间隙 | 水印之间的间距 | object | [100, 100] |
| offset | 水印距离容器左上角的偏移量，默认为 `gap/2` | object | [gap[0]/2, gap[1]/2] |
Font
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| color | 字体颜色 | string | rgba(0,0,0,.15) |
| 字号 | 字体大小 | number / string | 16 |
| 字体粗细 | 字体粗细 | 枚举 | 正常 |
| 字体系列 | 字体系列 | string | sans-serif |
| fontGap 2.11.5 | 字体间隙 | number | 3 |
| 字体样式 | 字体样式 | 枚举 | 正常 |
| 文本对齐 | 文本对齐方式 | 枚举 | 居中 |
| 文本基线 | 文本基线 | 枚举 | 悬挂 |
插槽
| 名称 | 描述 |
|---|---|
| default | 添加水印的容器 |
来源
贡献者
