Watermark 水印

给页面某个区域加上文字或图片水印，适用于版权标识、防信息盗用。

给页面的某个区域加上水印。

导入

import { Watermark } from "@reglow/reui";

何时使用

页面需要添加水印标识版权时使用
适用于防止信息盗用

代码演示

基础用法

<script setup lang="ts">
import { Watermark } from "@reglow/reui";
</script>

<template>
  <Watermark content="Ant Design">
    <div class="h-500px">内容区域</div>
  </Watermark>
</template>

多行水印

<Watermark :content="['Ant Design', 'Happy Working']">
  <div class="h-500px" />
</Watermark>

图片水印

<Watermark
  :width="130"
  :height="30"
  image="/logo.png"
>
  <div class="h-500px" />
</Watermark>

自定义配置

<Watermark
  content="版权所有"
  :rotate="-30"
  :z-index="11"
  :gap="[200, 200]"
  :font="{
    color: 'rgba(255, 0, 0, 0.1)',
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: 'sans-serif',
  }"
>
  <div class="h-500px" />
</Watermark>

图片加载失败回退

<!-- 图片加载失败时自动使用文字水印 -->
<Watermark
  :width="130"
  :height="30"
  content="Ant Design"
  image="/possibly-broken-image.png"
>
  <div class="h-500px" />
</Watermark>

API

Watermark Props

属性	说明	类型	默认值
content	水印文字内容	`string \| string[]`	-
image	图片源（支持 base64，优先级高于 content）	`string`	-
width	水印宽度	`number`	`120`
height	水印高度	`number`	`64`
rotate	旋转角度（°）	`number`	`-22`
zIndex	z-index	`number`	`999`
font	文字样式	`WatermarkFont`	见下
gap	水印间距	`[number, number]`	`[100, 100]`
offset	距容器偏移	`[number, number]`	`gap / 2`
inherit	传导给弹出组件	`boolean`	`true`

WatermarkFont

属性	说明	类型	默认值
color	字体颜色	`string`	`rgba(0, 0, 0, 0.15)`
fontSize	字体大小	`number`	`16`
fontWeight	字体粗细	`"normal" \| "lighter" \| "bold" \| "bolder" \| number`	`normal`
fontFamily	字体类型	`string`	`sans-serif`
fontStyle	字体样式	`"none" \| "normal" \| "italic" \| "oblique"`	`normal`
textAlign	文本对齐	`CanvasTextAlign`	`center`

内容锚点

导入
何时使用
代码演示
API
- Watermark Props
- WatermarkFont