Watermark 水印
在宿主元素上平铺文字或图案水印。组件拥有高安全性的防御防篡改机制，在用户尝试修改水印的 style 或物理从 DOM 树中移除水印节点时，会瞬间触发内置的 MutationObserver 监听，瞬间销毁脏节点并彻底重建。
预览
基础文本水印 (全区域铺满)
机密合同内容详情
本协议及其附件所含全部技术信息、商业机密和规划均属甲乙双方的核心资产。未经双方共同书面授权，严禁任何第三方以任何形式进行复制、分发或传播。
旋转度数与网格间距定制
红色醒目警告水印
此处平铺的是红色倾斜的 Confidential 英文防篡改水印，间距加宽为 100x100 像素网格，多层防护。
安装
pnpm dlx brutx-vue@latest add watermark用法
基础文字水印
将敏感页面或机密内容包裹在 <Watermark> 中。
<script setup>
import { Watermark } from 'brutx-ui-vue'
</script>
<template>
<Watermark content="机密信息，严禁外传">
<div class="confidential-doc">
<h3>核心机密数据</h3>
<p>合作条款 details...</p>
</div>
</Watermark>
</template>多行水印与字体/旋转定制
支持传入数组生成多行水印，并且可以控制倾斜角度、网格大小以及文字样式。
<template>
<Watermark
:content="['CONFIDENTIAL', 'DEPT 01']"
:rotate="-15"
:gap="[120, 120]"
:font="{ color: 'rgba(239, 68, 68, 0.12)', fontSize: 16, fontWeight: 'bold' }"
>
<div class="content-box">
<p>敏感段落数据示例...</p>
</div>
</Watermark>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
width | number | undefined | 120 | 设置单个水印图块的宽度，单位为像素。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
height | number | undefined | 64 | 设置单个水印图块的高度，单位为像素。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
rotate | number | undefined | -22 | 设置水印图案的旋转角度，单位为度；默认值 -22 表示逆时针倾斜。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
zIndex | number | undefined | 9999 | 设置水印覆盖层的 CSS z-index。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
image | string | undefined | undefined | 设置作为水印的图片 URL 或 Data URL；提供图片时使用图片图案而不绘制文本内容。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
content | string | string[] | undefined | "" | 设置水印文本；传入字符串数组可在单个图块中排布多行。 |
详情声明类型string | string[] | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
font | WatermarkFont | undefined | { "fontFamily": "sans-serif", "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal" }按实例调用工厂函数 | 配置文字水印的颜色、字号、字重、字形和字体族；默认使用 14px sans-serif 常规字重，颜色跟随 --brutal-fg 并以 15% 不透明度绘制。 |
详情声明类型WatermarkFont | undefined 关联类型 WatermarkFont 类型定义 — WatermarkFontinterface WatermarkFont {
color?: string
fontSize?: number | string
fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number
fontStyle?: 'normal' | 'italic' | 'oblique'
fontFamily?: string
}默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
gap | [number, number] | undefined | [100, 100]按实例调用工厂函数 | 设置相邻水印图块在水平方向和垂直方向的间距，顺序为 [gapX, gapY]。 |
详情声明类型[number, number] | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
offset | [number, number] | undefined | [0, 0]按实例调用工厂函数 | 设置水印平铺起点在水平和垂直方向上的偏移，顺序为 [offsetX, offsetY]。 |
详情声明类型[number, number] | undefined 默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
seal | boolean | undefined | false | 启用复古印章装饰，在图块中绘制双圆环和中心五角星。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/watermark/Watermark.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 水印覆盖的宿主内容；组件在其上方平铺装饰性水印。 |
详情声明类型{}来源packages/ui/src/components/watermark/Watermark.vue | ||
WatermarkFont 类型定义
interface WatermarkFont {
color?: string // 文本颜色，默认 'rgba(0, 0, 0, 0.15)'
fontSize?: number | string // 字体大小，支持数字或带单位字符串（如 14, '16px', '1.2rem'），默认 14
fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number // 字体粗细，默认 'normal'
fontStyle?: 'normal' | 'italic' | 'oblique' // 字体风格，默认 'normal'
fontFamily?: string // 字体族，默认 'sans-serif'
}安全特性
- Canvas 兼容兜底：在不支持 Canvas 渲染的无浏览器测试环境（如 JSDOM）下，自动降级为生成纯矢量 SVG 的 Base64 水印图层，保障组件渲染通过。
- 防止恶意篡改：采用基于
MutationObserver的防篡改防火墙，一旦用户强行在 Devtools 中修改样式（如display: none）或强制remove()节点，组件将拦截该变动，并在 50ms 内摧毁原位置垃圾，重新生成干净的 DOM 节点，保障高安全要求。
可访问性
- 装饰层语义：水印是装饰性背景层，不参与语义内容；建议结合
aria-hidden与pointer-events-none使用，避免被辅助技术朗读或被指针事件拦截。 - 对比度考虑：水印文本颜色（
--brutal-watermark-color等令牌）需与背景保持足够对比，但作为装饰层不承担信息传达职责，不强制 WCAG 文本对比。 - 动效降级：防篡改重建、Canvas 绘制均无强制动效，尊重
prefers-reduced-motion。