Watermark 水印

用于给页面或组件添加水印，防止信息被截图或复制。

文字水印

通过 content 属性设置水印文字内容。

这里是需要保护的内容区域。

<template>
  <ZcWatermark content="ZC UI">
    <div
      style="width: 300px; height: 200px; background: #f5f7fa; border-radius: 4px; padding: 16px;"
    >
      <p>这里是需要保护的内容区域。</p>
    </div>
  </ZcWatermark>
</template>

多行水印

content 属性支持数组，可以设置多行水印文字。

这里是需要保护的内容区域。

<template>
  <ZcWatermark :content="['内部机密', '请勿外传']" :gap="[120, 80]">
    <div
      style="width: 300px; height: 200px; background: #f5f7fa; border-radius: 4px; padding: 16px;"
    >
      <p>这里是需要保护的内容区域。</p>
    </div>
  </ZcWatermark>
</template>

自定义样式

通过属性自定义水印的字体、颜色、旋转角度等样式。

这里是需要保护的内容区域。

<template>
  <ZcWatermark
    content="ZC UI"
    :font-size="16"
    :rotate="-30"
    color="rgba(64, 158, 255, 0.15)"
    :gap="[100, 100]"
  >
    <div
      style="width: 300px; height: 200px; background: #f5f7fa; border-radius: 4px; padding: 16px;"
    >
      <p>这里是需要保护的内容区域。</p>
    </div>
  </ZcWatermark>
</template>

Watermark API

Props

参数	说明	类型	默认值
content	水印内容	string | string[]	''
image	水印图片 URL（覆盖文字水印）	string	''
fontSize	字体大小(px)	number	14
fontFamily	字体	string	'sans-serif'
color	水印颜色	string	'rgba(0, 0, 0, 0.12)'
fontWeight	字体粗细	string | number	'normal'
fontStyle	字体样式	string	'normal'
rotate	旋转角度	number	-22
opacity	透明度	number	1
gap	水印之间的间距 [x, y](px)	[number, number]	[100, 100]
offset	水印的偏移量 [x, y](px)	[number, number]	[0, 0]
zIndex	水印层的 z-index	number	9
disabled	是否禁用水印	boolean	false

Slots

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