Tui

Watermark 水印
用于内容防篡改与版权声明的水印组件,支持样式配置与防删除监听。
基础用法
给内容区域叠加水印,默认无交互、可穿透。
示例代码
vue
显示/隐藏
通过 visible 属性控制水印的显示和隐藏。
示例代码
vue
自定义样式
通过 fontSizefontWeightcoloropacitywidthheightgaprotate 调整样式。
示例代码
vue
容器配置
支持自定义容器,默认使用 body 作为容器,也支持指定特定元素作为水印容器。

默认容器 (body)

自定义容器

这个区域有独立水印

示例代码
vue
多行文本间距
通过 gap 属性控制水印瓦片和多行文本的间距,格式为 [x, y]

默认间距

自定义间距 (gap: [0, 24])

示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
content
水印内容,支持单行文本或多行文本数组
string | string[]
-
required
visible
是否显示水印
boolean
-
true
container
水印容器,默认为 body,支持 HTMLElement 或返回 HTMLElement 的函数
HTMLElement | (() => HTMLElement)
-
document.body
rotate
水印旋转角度(度)
number
-
-30
width
水印瓦片宽度
number
-
120
height
水印瓦片高度
number
-
0
opacity
水印透明度
number
0 ~ 1
1
fontSize
字体大小
number
-
14
color
字体颜色
string
-
rgba(0, 0, 0, 0.15)
fontFamily
字体家族
string
-
sans-serif
fontWeight
字体粗细
string | number
-
normal
gap
水印间距,格式为 `[x, y]`
[number, number]
-
[0, 0]
基础用法
显示/隐藏
自定义样式
容器配置
多行文本间距
属性 Props