Watermark 水印

给页面的某个区域加上水印，支持文字和图片水印，具有防篡改功能。

基础用法

最简单的用法。

这是一个带有水印的内容区域

水印会自动重复填充整个区域

vue

<template>
  <c-watermark content="CUI水印">
    <div class="content-box">
      <p>这是一个带有水印的内容区域</p>
      <p>水印会自动重复填充整个区域</p>
    </div>
  </c-watermark>
</template>

多行文字

通过设置 content 为数组来实现多行文字水印。

这是多行文字水印的示例

可以显示多行文字内容

vue

<template>
  <c-watermark :content="['CUI组件库', '版权所有']">
    <div class="content-box">
      <p>这是多行文字水印的示例</p>
      <p>可以显示多行文字内容</p>
    </div>
  </c-watermark>
</template>

透明度对比

通过调整 alpha 属性来控制水印的透明度。

透明度: 0.1

水印几乎不可见

透明度: 0.8

水印清晰可见

vue

<template>
  <!-- 低透明度 -->
  <c-watermark content="低透明度" :alpha="0.1">
    <div class="content-box">
      <p>透明度: 0.1</p>
    </div>
  </c-watermark>
  
  <!-- 高透明度 -->
  <c-watermark content="高透明度" :alpha="0.8">
    <div class="content-box">
      <p>透明度: 0.8</p>
    </div>
  </c-watermark>
</template>

旋转角度

通过 rotate 属性设置水印的旋转角度。

旋转角度: 0°

水平显示

旋转角度: -45°

倾斜显示

vue

<template>
  <!-- 水平水印 -->
  <c-watermark content="水平水印" :rotate="0">
    <div class="content-box">
      <p>旋转角度: 0°</p>
    </div>
  </c-watermark>
  
  <!-- 倾斜水印 -->
  <c-watermark content="倾斜水印" :rotate="-45">
    <div class="content-box">
      <p>旋转角度: -45°</p>
    </div>
  </c-watermark>
</template>

图片水印

通过设置 image 属性来使用图片作为水印。

这是图片水印的示例

可以使用任何图片作为水印

vue

<template>
  <c-watermark 
    image="https://via.placeholder.com/120x64/409eff/ffffff?text=LOGO" 
    :width="120" 
    :height="64"
  >
    <div class="content-box">
      <p>这是图片水印的示例</p>
      <p>可以使用任何图片作为水印</p>
    </div>
  </c-watermark>
</template>

自定义配置

通过设置各种属性来自定义水印的样式。

机密文档

这是一个带有自定义样式水印的内容区域

水印角度为45度，颜色为红色，透明度较低

间距也进行了调整

vue

<template>
  <c-watermark 
    content="CONFIDENTIAL" 
    :rotate="45" 
    :alpha="0.1" 
    font-color="red" 
    :font-size="20"
    :gap="[150, 150]"
  >
    <div class="content-box large">
      <h3>机密文档</h3>
      <p>这是一个带有自定义样式水印的内容区域</p>
      <p>水印角度为45度，颜色为红色，透明度较低</p>
      <p>间距也进行了调整</p>
    </div>
  </c-watermark>
</template>

间距设置

通过 gap 属性调整水印之间的间距。

间距: [80, 80]

水印较密集

间距: [200, 200]

水印较稀疏

vue

<template>
  <!-- 密集水印 -->
  <c-watermark content="密集水印" :gap="[80, 80]">
    <div class="content-box">
      <p>间距: [80, 80]</p>
    </div>
  </c-watermark>
  
  <!-- 稀疏水印 -->
  <c-watermark content="稀疏水印" :gap="[200, 200]">
    <div class="content-box">
      <p>间距: [200, 200]</p>
    </div>
  </c-watermark>
</template>

字体样式

自定义水印的字体大小、颜色和样式。

字体大小: 24px

颜色: 蓝色，加粗

字体大小: 18px

颜色: 绿色，斜体

vue

<template>
  <!-- 大字体水印 -->
  <c-watermark 
    content="大字体水印" 
    :font-size="24" 
    font-color="#409eff" 
    font-weight="bold"
  >
    <div class="content-box">
      <p>字体大小: 24px</p>
    </div>
  </c-watermark>
  
  <!-- 斜体水印 -->
  <c-watermark 
    content="斜体水印" 
    :font-size="18" 
    font-color="#67c23a" 
    font-style="italic"
  >
    <div class="content-box">
      <p>字体大小: 18px</p>
    </div>
  </c-watermark>
</template>

防篡改

水印组件具有防篡改功能，当水印被删除或修改时会自动恢复并触发 change 事件。

尝试通过开发者工具删除或修改水印元素

水印会自动恢复并触发change事件

vue

<template>
  <c-watermark content="防篡改水印" @change="handleWatermarkChange">
    <div class="content-box">
      <p>尝试通过开发者工具删除或修改水印元素</p>
      <p>水印会自动恢复并触发change事件</p>
    </div>
  </c-watermark>
</template>

<script setup>
const handleWatermarkChange = (event) => {
  console.log('水印被篡改:', event)
  // 可以在这里添加相应的处理逻辑
}
</script>

禁用状态

通过 disabled 属性可以禁用水印显示。

disabled: false

水印正常显示

disabled: true

水印被禁用

vue

<template>
  <!-- 正常状态 -->
  <c-watermark content="正常水印" :disabled="false">
    <div class="content-box">
      <p>水印正常显示</p>
    </div>
  </c-watermark>
  
  <!-- 禁用状态 -->
  <c-watermark content="禁用水印" :disabled="true">
    <div class="content-box">
      <p>水印被禁用</p>
    </div>
  </c-watermark>
</template>

实际应用场景

以下是一些常见的水印应用场景示例。

文档保护

重要文档标题

这是一份重要的机密文档内容。文档包含敏感信息，需要添加水印以防止未授权传播。

水印会覆盖整个文档区域，起到版权保护和防泄露的作用。

即使文档被截图或打印，水印信息也会一同显示，便于追溯来源。

用户身份标识

系统管理界面

当前登录用户: admin@example.com

水印显示当前用户身份，便于操作审计和责任追溯。

vue

<template>
  <!-- 文档保护 -->
  <c-watermark 
    :content="['机密文档', '请勿外传']" 
    :rotate="45" 
    :alpha="0.15" 
    font-color="#ff4757" 
    :font-size="16"
    :gap="[120, 120]"
  >
    <div class="document-content">
      <h3>重要文档标题</h3>
      <p>文档内容...</p>
    </div>
  </c-watermark>
  
  <!-- 用户身份标识 -->
  <c-watermark 
    content="用户: admin@example.com" 
    :rotate="-15" 
    :alpha="0.1" 
    font-color="#2f3542" 
    :font-size="14"
    :gap="[180, 100]"
  >
    <div class="admin-panel">
      <h3>系统管理界面</h3>
      <p>管理内容...</p>
    </div>
  </c-watermark>
</template>

API

Watermark Attributes

参数	说明	类型	可选值	默认值
content	水印文字内容，支持单行或多行文字	string / string[]	—	''
image	水印图片地址，设置后将显示图片水印	string	—	''
width	水印区域宽度（像素）	number	—	120
height	水印区域高度（像素）	number	—	64
rotate	水印旋转角度（度数），正数顺时针，负数逆时针	number	—	-22
z-index	水印元素的层级	number	—	9
alpha	水印透明度，0为完全透明，1为完全不透明	number	0-1	0.5
font-size	文字水印的字体大小（像素）	number	—	16
font-color	文字水印的字体颜色	string	—	'rgba(0,0,0,.15)'
font-style	文字水印的字体样式	string	normal / italic / oblique	'normal'
font-weight	文字水印的字体粗细	string / number	normal / bold / 100-900	'normal'
font-family	文字水印的字体系列	string	—	'sans-serif'
gap	水印之间的间距 [水平间距, 垂直间距]	[number, number]	—	[100, 100]
offset	水印的偏移量 [水平偏移, 垂直偏移]	[number, number]	—	[0, 0]
disabled	是否禁用水印显示	boolean	—	false

Watermark Events

事件名	说明	回调参数
change	水印被篡改时触发（如删除、修改水印元素）	(event: Event)

Watermark Slots

插槽名	说明
default	需要添加水印的内容区域

注意事项

优先级：当同时设置 content 和 image 时，image 优先级更高
性能：水印使用 Canvas 生成，大量水印可能影响性能
防篡改：组件使用 MutationObserver 监控 DOM 变化，自动恢复被删除的水印
响应式：水印会根据容器大小自动调整显示区域
兼容性：需要浏览器支持 Canvas API 和 MutationObserver API

Watermark 水印 ​

基础用法 ​

多行文字 ​

透明度对比 ​

旋转角度 ​

图片水印 ​

自定义配置 ​

机密文档

间距设置 ​

字体样式 ​

防篡改 ​

禁用状态 ​

实际应用场景 ​

文档保护 ​