Watermark 水印
给页面的特定区域添加水印。具有极强的防删除和防篡改能力。
基础用法
业务场景：表单数据保护
在处理包含姓名、薪资等机密信息的表单时，水印是关键的安全防线。
全屏水印
交互式自定义配置
通过下方的实验室，您可以实时探索高级配置。
normal
center
在 Nuxt 中使用
由于水印组件依赖于 DOM 操作和 Canvas 渲染，在 Nuxt 3 等 SSR 环境中，请务必使用 <ClientOnly> 标签包裹组件。
vue
<template>
<ClientOnly>
<yh-watermark content="YH-UI Nuxt 驱动">
<div style="height: 300px;">内容区</div>
</yh-watermark>
</ClientOnly>
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 水印每个单元的宽度 | number | 120 |
| height | 水印每个单元的高度 | number | 64 |
| rotate | 单元格旋转角度 | number | -22 |
| globalRotate | 整体旋转角度 | number | 0 |
| zIndex | 水印层级 | number | 9 |
| image | 图片源，设置后 content 将失效 | string | - |
| content | 水印文字内容，支持多行 | string | string[] | 'YH-UI' |
| font | 字体样式设置对象 | Font | 见下文 |
| gap | 水印之间的间距 [x, y] | [number, number] | [100, 100] |
| offset | 水印距离容器起始点的偏移 [x, y] | [number, number] | [0, 0] |
| fullScreen | 是否将水印挂载到 body 下全屏展示 | boolean | false |
| antiTamper | 是否开启防篡改模式（监控 DOM 变更并强制恢复） | boolean | true |
Font 对象说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 文字颜色 | string | 'rgba(0,0,0,0.15)' |
| fontSize | 字体大小 | number | string | 16 |
| fontWeight | 字重 | string | number | 'normal' |
| fontFamily | 字体库 | string | 'sans-serif' |
| fontStyle | 字体样式 | 'normal' | 'italic' | 'oblique' | 'normal' |
| textAlign | 文本对齐方式 | 'start' | 'end' | 'left' | 'right' | 'center' | 'center' |
| lineHeight | 行高 | number | 22 |
Events
本项目 Watermark 水印组件暂无对外抛出的事件。
Slots
| 插槽名 | 说明 |
|---|---|
| default | 水印覆盖的内容区域 |
Expose
| 方法名 | 说明 | 类型 |
|---|---|---|
| renderWatermark | 强制重新渲染水印（在容器大小动态变化但未触发监听时使用） | () => void |
主题变量 (CSS Variables)
组件使用 CSS 变量来定义基础样式，您可以在本地或全局进行覆盖。
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-watermark-container-position | 包裹容器的定位方式 | relative |
--yh-watermark-width | 组件宽度 | 100% |
--yh-watermark-height | 组件高度 | 100% |
--yh-watermark-fullscreen-z-index | 全屏模式下的强制层级 | 9999 |