Watermark
Add a watermark to a specific area of the page. It supports text or image watermarks, fullscreen overlays, and anti-tamper regeneration.
Basic Usage
Business Scenario: Form Data Protection
For pages that display sensitive content, YhWatermark can be added directly around the protected area without changing the internal layout.
Fullscreen Watermark
Use full-screen when the watermark should cover the whole viewport instead of a local container.
Interactive Configuration
The following lab keeps the existing preview layout and lets you inspect the effect of font, gap, rotation, and z-index changes in real time.
Use in Nuxt
YhWatermark is safe to import in Nuxt. The container markup can be rendered during SSR, while the actual watermark drawing runs on the client after mount. If you want to avoid rendering the watermark container before hydration in a browser-only area, you can wrap it with <ClientOnly>.
<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 tile | number | 120 |
| height | Height of each watermark tile | number | 64 |
| rotate | Rotation angle of each watermark tile | number | -22 |
| z-index | z-index applied to the watermark overlay | number | 9 |
| image | Image source used instead of text content | string | undefined |
| content | Watermark text content. Strings can include line breaks and arrays map to multiple lines. | string | string[] | 'YH-UI' |
| font | Watermark font configuration | YhWatermarkFont | see below |
| global-rotate | Global rotation angle of the repeated watermark layer | number | 0 |
| gap | Horizontal and vertical gap between watermark tiles | [number, number] | [100, 100] |
| offset | Declared offset prop. The current implementation does not consume it when positioning the watermark layer | [number, number] | [0, 0] |
| full-screen | Uses a fixed-position wrapper to cover the viewport. The component is not teleported to body | boolean | false |
| anti-tamper | Rebuilds the watermark when the overlay is removed or modified | boolean | true |
| theme-overrides | Component-level theme overrides. In the current implementation they are merged only in non-fullscreen mode | ComponentThemeVars | undefined |
Font
| 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 inside the watermark tile | 'start' | 'end' | 'left' | 'right' | 'center' | 'center' |
| lineHeight | Line height for multi-line text | number | 22 |
Events
This component does not expose component events.
Slots
| Name | Description | Parameters |
|---|---|---|
| default | Content covered by the watermark overlay | - |
Expose
| Name | Description | Type |
|---|---|---|
| renderWatermark | Forces the watermark to be regenerated | () => void |
Theme Variables
YhWatermark supports themeOverrides and also exposes a small wrapper-level CSS variable surface.
| Variable | Description | Default |
|---|---|---|
--yh-watermark-container-position | Position mode of the watermark wrapper | relative |
--yh-watermark-width | Wrapper width | 100% |
--yh-watermark-height | Wrapper height | 100% |
--yh-watermark-fullscreen-z-index | Fullscreen wrapper z-index | 9999 |
Type Exports
| Name | Description |
|---|---|
YhWatermarkProps | Component props type |
YhWatermarkFont | Watermark font config type |
YhWatermarkSlots | Component slots type |
YhWatermarkExpose | Component expose type |
YhWatermarkInstance | Component instance type |