Watermark

Add a watermark to specific areas of a page. Features strong anti-removal and anti-tamper capabilities.

Basic Usage

Basic content display

Business Scenario: Form Data Protection

When handling forms with confidential information like names and salaries, watermarks serve as a critical security layer.

Employee Sensitive Data Preview

Account: user_admin_01

Name: Wang Xiaoming

Phone: 138****8888

Level: P7 - Senior Engineer

Salary: ¥**,000 (A)

Dept: Frontend Intelligent Dept

Fullscreen Watermark

Interactive Configuration

Explore advanced configurations in real-time using the lab below.

Build modern, fast, and flagship-level Vue 3 component libraries

z-index: 5

Core Asset Protection

Here you can customize the watermark deeply. When z-index < 5, the watermark text will hide behind the blue card, achieving differentiated protection for page elements.

Content

Font Size

Color

Font Style

normal

Text Align

center

Font Weight

Cell Rotation

Global Rotation

Height

Width

Line Height

z-index

X Gap

Y Gap

Usage in Nuxt

Since the Watermark component relies on DOM operations and Canvas rendering, ensure you wrap it with a <ClientOnly> tag in SSR environments like Nuxt 3.

<template>
  <ClientOnly>
    <yh-watermark content="YH-UI Nuxt Powered">
      <div style="height: 300px;">Content Area</div>
    </yh-watermark>
  </ClientOnly>
</template>

API

Props

Name	Description	Type	Default
width	Width of each watermark unit	number	120
height	Height of each watermark unit	number	64
rotate	Rotation angle of the unit cell	number	-22
globalRotate	Overall rotation angle	number	0
zIndex	Watermark z-index	number	9
image	Image source; if set, content will be ignored	string	-
content	Watermark text; supports multi-line	string | string[]	'YH-UI'
font	Font style configuration object	Font	See below
gap	Gap between watermarks [x, y]	[number, number]	[100, 100]
offset	Offset from the container's start point [x, y]	[number, number]	[0, 0]
fullScreen	Whether to mount the watermark under body for fullscreen	boolean	false
antiTamper	Whether to enable anti-tamper mode (monitors DOM changes)	boolean	true

Font Object Description

Name	Description	Type	Default
color	Text color	string	`'rgba(0,0,0,0.15)'
fontSize	Font size	number | string	16
fontWeight	Font weight	string | number	'normal'
fontFamily	Font family	string	'sans-serif'
fontStyle	Font style	'normal' | 'italic' | 'oblique'	'normal'
textAlign	Text alignment	'start' | 'end' | 'left' | 'right' | 'center'	'center'
lineHeight	Line height	number	22

Events

This Watermark component does not currently expose any events.

Slots

Name	Description
default	Content area covered by the watermark

Expose

Name	Description	Type
renderWatermark	Force a re-render of the watermark (useful when container size changes but isn't detected)	() => void

Theme Variables (CSS Variables)

Define basic styles using these CSS variables; they can be overridden locally or globally.

Variable Name	Description	Default
--yh-watermark-container-position	Positioning mode for the wrapper container	relative
--yh-watermark-width	Component width	100%
--yh-watermark-height	Component height	100%
--yh-watermark-fullscreen-z-index	Forced z-index in fullscreen mode	9999