N Watermark

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

Watermark Slots

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" />