n-watermark

name	n-watermark
description	Watermark component for adding watermarks to content areas. Invoke when user needs text or image watermarks, fullscreen watermarks, or content protection in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

Naive UI Watermark Component

Watermark component for adding text or image watermarks to content areas.

When to Use

Use this component when:

• Content protection: Add watermarks to sensitive content
• Branding: Display brand watermarks on documents
• Copyright: Show copyright information
• Preview marking: Mark preview/draft content

When to Invoke

Invoke this skill when:

• User needs to add watermarks to content
• User wants fullscreen watermarks
• User needs image watermarks
• User wants multiline text watermarks
• User needs customizable watermark styling

Features

• Text Watermarks: Customizable text content
• Image Watermarks: Support for image watermarks
• Fullscreen Mode: Apply watermark to entire page
• Multiline Support: Multiple lines of text
• Custom Styling: Font, color, rotation, and spacing options
• Content Selection: Control whether content is selectable

API Reference

Watermark Props

Name	Type	Default	Description
content	string	undefined	Watermark text content (supports \n for multiline).
cross	boolean	false	Show watermark at cross position.
debug	boolean	false	Show debug grid.
font-size	number	14	Font size.
font-family	string	undefined	Font family.
font-style	'normal' | 'italic' | 'oblique ${number}deg'	'normal'	Font style.
font-variant	string	''	Font variant.
font-weight	number	400	Font weight.
font-color	string	'rgba(128, 128, 128, .3)'	Font color.
fullscreen	boolean	false	Show fullscreen watermark.
global-rotate	number	0	Global rotation degree.
line-height	number	14	Line height.
height	number	32	Watermark area height.
image	string	undefined	Image URL for image watermark.
image-height	number	undefined

Watermark Slots

Name	Parameters	Description
default	()	Content to be watermarked.

Basic Usage

Basic Text Watermark

<template>
  <n-watermark
    content="Watermark"
    cross
    selectable
    :font-size="16"
    :line-height="16"
    :width="192"
    :height="128"
    :x-offset="12"
    :y-offset="28"
    :rotate="-15"
  >
    <n-table :bordered="false" :single-line="false">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
      </tbody>
    </n-table>
  </n-watermark>
</template>

Fullscreen Watermark

<template>
  <n-watermark
    v-if="show"
    content="All the roads we have to walk are winding"
    cross
    fullscreen
    :font-size="16"
    :line-height="16"
    :width="384"
    :height="384"
    :x-offset="12"
    :y-offset="80"
    :rotate="-15"
  />
  <n-switch v-model:value="show" />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

Image Watermark

<template>
  <n-watermark
    v-if="show"
    image="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
    cross
    fullscreen
    :width="384"
    :height="384"
    :x-offset="12"
    :y-offset="0"
    :image-width="64"
    :image-opacity="0.24"
  />
  <n-switch v-model:value="show" />
</template>

Multiline Text Watermark

<template>
  <n-watermark
    :content="'Company Name\nConfidential'"
    cross
    selectable
    :font-size="16"
    :line-height="16"
    :width="192"
    :height="128"
    :x-offset="12"
    :y-offset="28"
    :rotate="-15"
    text-align="center"
  >
    <n-table :bordered="false" :single-line="false">
      <!-- Table content -->
    </n-table>
  </n-watermark>
</template>

Common Patterns

Draft Watermark

<template>
  <n-watermark
    content="DRAFT"
    :font-size="24"
    :font-color="'rgba(255, 0, 0, 0.2)'"
    :rotate="-30"
    :width="200"
    :height="150"
  >
    <n-card title="Document Preview">
      <n-p>Document content goes here...</n-p>
    </n-card>
  </n-watermark>
</template>

Confidential Document

<template>
  <n-watermark
    :content="'CONFIDENTIAL\nInternal Use Only'"
    cross
    :font-size="14"
    :font-color="'rgba(200, 50, 50, 0.15)'"
    :rotate="-20"
    :line-height="20"
    text-align="center"
  >
    <n-card>
      <n-p>Sensitive document content...</n-p>
    </n-card>
  </n-watermark>
</template>

Company Branding

<template>
  <n-watermark
    content="© Company Name 2024"
    :font-size="12"
    :font-color="'rgba(0, 0, 0, 0.1)'"
    :rotate="-15"
    :x-gap="100"
    :y-gap="100"
  >
    <div class="content-area">
      <!-- Your content -->
    </div>
  </n-watermark>
</template>

Toggle Watermark

<template>
  <div>
    <n-space class="mb-4">
      <n-switch v-model:value="showWatermark" />
      <n-text>Show Watermark</n-text>
    </n-space>
    <n-watermark
      v-if="showWatermark"
      content="Preview"
      :font-size="20"
      :rotate="-25"
    >
      <n-card>
        <n-p>Content with conditional watermark...</n-p>
      </n-card>
    </n-watermark>
    <n-card v-else>
      <n-p>Content without watermark...</n-p>
    </n-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showWatermark = ref(true)
</script>

Custom Styled Watermark

<template>
  <n-watermark
    content="Custom Style"
    :font-size="18"
    :font-color="'rgba(100, 100, 255, 0.2)'"
    :font-style="'italic'"
    :font-weight="600"
    :rotate="-15"
    :global-rotate="5"
    :x-gap="50"
    :y-gap="50"
  >
    <n-card>
      <n-p>Content with custom styled watermark...</n-p>
    </n-card>
  </n-watermark>
</template>

Best Practices

1. Use appropriate opacity: Keep watermarks subtle to not distract from content

   <n-watermark :font-color="'rgba(128, 128, 128, 0.15)'" />
   

2. Set rotation for visual appeal: Use slight rotation for better coverage

   <n-watermark :rotate="-15" />
   

3. Use cross for better coverage: Enable cross for denser watermark pattern

   <n-watermark cross />
   

4. Control content selection: Set selectable based on use case

   <n-watermark :selectable="false" />
   

5. Use fullscreen for page-level protection: Apply fullscreen for entire page

   <n-watermark fullscreen content="Confidential" />
   

6. Check image cross-origin: Ensure image URLs allow cross-origin access

   • Image watermarks may fail due to CORS restrictions

7. Adjust gap and offset: Fine-tune spacing for optimal coverage

   <n-watermark :x-gap="50" :y-gap="50" :x-offset="25" :y-offset="25" />
   

8. Use multiline for more information: Combine multiple lines with \n

   <n-watermark :content="'Company\nConfidential'" text-align="center" />