---
title: Watermark 水印
description: 给页面的某个区域加上水印
isComponent: true
usage: true
spline: message
author: swimly
---

## 基本用法

通过`watermarkContent`来定义水印的内容，支持文字水印和图片水印，值类型为`object`，`array`，当其值为数组类型时，代表多行水印。

### 文字水印

当显示多行水印时，可通过设置`lineSpace`来控制多行之间的间隔。

完整的文字水印配置项如下所示：

```js
export interface WatermarkText {
  fontColor?: string
  fontSize?: number
  fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder'
  text?: string
}
```

{{ base }}

### 图片水印

通过设置`watermarkContent`中的`url`可设置图片水印

完整的图片水印配置如下所示：

```js
export interface WatermarkImage {
  isGrayscale?: boolean
  url?: string
}
```

{{ image }}

## 运动的水印

通过`movable`可让水印处于随机运动状态。

{{ movable }}
