Watermark 水印

在页面上添加文本或图片等水印信息

基础用法

基础用法

多行水印

使用 "content" 设置一个字符串数组来指定多行文本水印内容

图片水印

通过 'image' 指定图像地址。 为了确保图像清晰展示而不是被拉伸,请设置宽度和高度,建议使用至少两倍的宽度和高度的图片来保证显示效果。

自定义配置

配置自定义参数预览水印效果。

Element Plus

A Vue 3 based component library for designers and developers

示例图片
Content
Color
FontSize
zIndex
Rotate
Gap
Offset

API

属性

属性名描述类型默认值
width水印的宽度, content 的默认值是它自己的宽度number120
height水印的高度, content 的默认值是它自己的高度number64
rotate水印的旋转角度, 单位 °number-22
zIndex水印元素的z-index值number9
image水印图片,建议使用 2x 或 3x 图像string
content水印文本内容string/object
font文字样式Font字体
gap水印之间的间距object[100, 100]
offset水印从容器左上角的偏移 默认值为 gap/2object[gap[0]/2, gap[1]/2]

Font

名称详情类型默认
color字体颜色stringrgba(0,0,0,.15)
fontSize字体大小number16
fontWeight字重enumnormal
fontFamily字体stringsans-serif
fontStyle字体样式enumnormal
textAlign文本对齐enumcenter
textBaseline文本基线enumhanging

Slots

名称详情
默认添加水印的容器

源代码

组件文档

贡献者