Watermark - Vant 4

Watermark

Intro

Add specific text or patterns on the page as watermarks, which can be used to prevent information theft. Please upgrade vant to >= v4.2.0 before using this component.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Watermark } from'vant'; const app = createApp(); app.use(Watermark);

Usage

Text Watermark

Use the content prop to set the text of the watermark.

Image Watermark

Use the image prop to set the watermark image, and use opacity prop to adjust the transparency of the watermark.

Custom Gap

Use gap-x``gap-y prop to control the gap between watermark items.

Custom Rotate

Use rotate prop to control the rotate of watermark. The default value is -22.

Display Range

Use the full-page prop to control the display range of the watermark.

HTML Watermark

Use the content slot to pass HTML as watermark. Only supports inline styles, and self-closing tags are not supported.

API

Props

Attribute	Description	Type	Default
width	Watermark width	number	100
height	Watermark height	number	100
z-index	Watermark's z-index	*number	string*
content	Text watermark content	string	-
image	Image watermark content. If content and image are passed at the same time, use the image watermark first	string	-
rotate	Watermark rotation angle	*number	string*
full-page	Whether to display the watermark in full screen	boolean	true
gap-x	Horizontal spacing between watermarks	number	0
gap-y	Vertical spacing between watermarks	number	0
text-color	Color of text watermark	string	#dcdee0

| opacity | Opacity of watermark | number | string | - |

Slots

Attribute	Description
content	Content of HTML watermark. Only supports inline styles, and self-closing tags are not supported. The priority is higher than content or image props

Types

The component exports the following type definitions:

importtype { WaterProps } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-watermark-z-index	100	z-index of root element