Watermark

Overlay repetitive text or image watermark layers onto host containers. Designed with security precautions, the component intercepts style changes (e.g. display: none) or physical DOM node removal, automatically reconstructing pure watermark nodes in real-time.

Preview

Preview

基础文本水印 (全区域铺满)

机密合同内容详情

本协议及其附件所含全部技术信息、商业机密和规划均属甲乙双方的核心资产。未经双方共同书面授权，严禁任何第三方以任何形式进行复制、分发或传播。

修改水印内容：

旋转度数与网格间距定制

红色醒目警告水印

此处平铺的是红色倾斜的 Confidential 英文防篡改水印，间距加宽为 100x100 像素网格，多层防护。

Installation

pnpm dlx brutx-vue@latest add watermark

Usage

Basic Text Watermark

Wrap sensitive content within <Watermark>.

<script setup>
import { Watermark } from 'brutx-ui-vue'
</script>

<template>
    <Watermark content="CONFIDENTIAL INFO">
        <div class="confidential-doc">
            <h3>Internal Documents</h3>
            <p>Agreement details...</p>
        </div>
    </Watermark>
</template>

Multi-line & Styling Customization

Pass an array to render multi-line text, and customize font sizing, angles, and gap grids.

<template>
    <Watermark
        :content="['CONFIDENTIAL', 'DEPT 01']"
        :rotate="-15"
        :gap="[120, 120]"
        :font="{ color: 'rgba(239, 68, 68, 0.12)', fontSize: 16, fontWeight: 'bold' }"
    >
        <div class="content-box">
            <p>Sensitive data details...</p>
        </div>
    </Watermark>
</template>

API Reference

Watermark — Props

Name	Type	Default	Description
width	number | undefined	120	Sets the width in pixels of a single watermark tile.
Details Declared type number | undefined Default value details Declaration 120 Source: packages/ui/src/components/watermark/Watermark.vue Resolved value 120 Source Watermark.vue:14 packages/ui/src/components/watermark/Watermark.vue
height	number | undefined	64	Sets the height in pixels of a single watermark tile.
Details Declared type number | undefined Default value details Declaration 64 Source: packages/ui/src/components/watermark/Watermark.vue Resolved value 64 Source Watermark.vue:15 packages/ui/src/components/watermark/Watermark.vue
rotate	number | undefined	-22	Sets the watermark rotation in degrees; the default -22 tilts it counterclockwise.
Details Declared type number | undefined Default value details Declaration -22 Source: packages/ui/src/components/watermark/Watermark.vue Resolved value -22 Source Watermark.vue:16 packages/ui/src/components/watermark/Watermark.vue
zIndex	number | undefined	9999	Sets the CSS z-index of the watermark overlay.
Details Declared type number | undefined Default value details Declaration 9999 Source: packages/ui/src/components/watermark/Watermark.vue Resolved value 9999 Source Watermark.vue:17 packages/ui/src/components/watermark/Watermark.vue
image	string | undefined	undefined	Sets a watermark image URL or Data URL. When provided, the image is used instead of text content.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/watermark/Watermark.vue Resolved value undefined Source Watermark.vue:18 packages/ui/src/components/watermark/Watermark.vue
content	string | string[] | undefined	""	Sets the watermark text. A string array lays out multiple lines in a tile.
Details Declared type string | string[] | undefined Default value details Declaration '' Source: packages/ui/src/components/watermark/Watermark.vue Resolved value "" Source Watermark.vue:19 packages/ui/src/components/watermark/Watermark.vue
font	WatermarkFont | undefined	{ "fontFamily": "sans-serif", "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal" } Factory evaluated per instance	Configures text watermark color, size, weight, style, and family. By default it uses 14px sans-serif with normal weight and draws --brutal-fg at 15% opacity.
Details Declared type WatermarkFont | undefined Referenced types WatermarkFont Type definition — WatermarkFont interface WatermarkFont { color?: string fontSize?: number | string fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number fontStyle?: 'normal' | 'italic' | 'oblique' fontFamily?: string } Default value details Declaration () => ({ fontSize: 14, fontWeight: 'normal', fontStyle: 'normal', fontFamily: 'sans-serif' }) Source: packages/ui/src/components/watermark/Watermark.vue Resolved value { "fontFamily": "sans-serif", "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal" } Source Watermark.vue:20 packages/ui/src/components/watermark/Watermark.vue
gap	[number, number] | undefined	[100, 100] Factory evaluated per instance	Sets horizontal and vertical spacing between watermark tiles as [gapX, gapY].
Details Declared type [number, number] | undefined Default value details Declaration () => [100, 100] Source: packages/ui/src/components/watermark/Watermark.vue Resolved value [100, 100] Source Watermark.vue:21 packages/ui/src/components/watermark/Watermark.vue
offset	[number, number] | undefined	[0, 0] Factory evaluated per instance	Offsets the starting point of the watermark tiling horizontally and vertically as [offsetX, offsetY].
Details Declared type [number, number] | undefined Default value details Declaration () => [0, 0] Source: packages/ui/src/components/watermark/Watermark.vue Resolved value [0, 0] Source Watermark.vue:22 packages/ui/src/components/watermark/Watermark.vue
seal	boolean | undefined	false	Adds a vintage seal treatment with two circular rings and a centered five-point star in each tile.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/watermark/Watermark.vue Resolved value false Source Watermark.vue:24 packages/ui/src/components/watermark/Watermark.vue

Watermark — Slots

Name	Signature or type	Description
#default	{}	The host content covered by the watermark; the component tiles the decorative watermark over it.
Details Declared type {} Source Watermark.vue packages/ui/src/components/watermark/Watermark.vue

WatermarkFont Type Definitions

interface WatermarkFont {
    color?: string                  // Color, defaults to 'rgba(0, 0, 0, 0.15)'
    fontSize?: number | string      // Font size, supports numbers or units like '16px', '1.2rem', defaults to 14
    fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number  // Font weight, defaults to 'normal'
    fontStyle?: 'normal' | 'italic' | 'oblique'                   // Font style, defaults to 'normal'
    fontFamily?: string             // Font family, defaults to 'sans-serif'
}

Security Features

• JSDOM SVG Fallback: Automatically switches to drawing pure inline vector SVG watermarks if the renderer fails to initialize 2D Canvas contexts (e.g. under headless test setups), maintaining page structure validity.
• Anti-tamper Guard: Listens to changes using MutationObserver on the target nodes. Any external tampering of style strings or DOM element deletion will be reverted, rebuilding a pristine watermark layout inside 50ms.

Accessibility

• Decorative layer: The watermark is a decorative background layer and does not carry semantic content; pair it with aria-hidden and pointer-events-none so it is not announced by assistive technology and does not intercept pointer events.
• Contrast: Watermark text color tokens should keep reasonable contrast against the background, but as a decorative layer it is not required to meet WCAG text-contrast thresholds.
• Reduced motion: Tamper-guard rebuild and Canvas drawing introduce no forced motion and respect prefers-reduced-motion.