Watermark

Компонент Watermark в библиотеке Naive UI предназначен для наложения водяного знака на элементы интерфейса, обеспечивая защиту контента или добавление фирменного оформления. Он поддерживает гибкую настройку текста, изображений и стилей отображения, позволяя интегрировать водяной знак в любой блок приложения на Vue 3.

Основное использование

Импорт компонента осуществляется из пакета naive-ui:

import { NWatermark } from 'naive-ui';

Простейший пример применения:

<template>
  <n-watermark content="Пример водяного знака">
    <div style="width: 400px; height: 200px; background-color: #f5f5f5;">
      Основной контент блока
    </div>
  </n-watermark>
</template>
  • content — основной текст водяного знака.
  • Вложенный элемент (<div>) остаётся интерактивным и доступным для пользовательских действий.

Настройка текста

Watermark позволяет изменять следующие параметры текста:

  • font — шрифт текста, например "16px Arial".
  • fill — цвет текста водяного знака. Можно использовать любой CSS-цвет.
  • rotate — угол поворота текста в градусах. Например, -30 для диагонального расположения.
  • gap — расстояние между повторениями текста { x: 100, y: 100 }.

Пример с настройкой:

<n-watermark 
  content="Конфиденциально" 
  :font="'20px Microsoft YaHei'" 
  fill="rgba(0, 0, 0, 0.15)" 
  :rotate="-30" 
  :gap="{ x: 120, y: 120 }"
>
  <div style="width: 500px; height: 300px; background-color: #ffffff;">
    Документ с водяным знаком
  </div>
</n-watermark>

Использование изображений

Помимо текста, Watermark поддерживает изображение в качестве водяного знака с помощью свойства image.

<n-watermark
  :image="'/path/to/logo.png'"
  :width="120"
  :height="80"
  :gap="{ x: 150, y: 150 }"
  :rotate="-20"
>
  <div style="width: 600px; height: 400px; background-color: #f0f0f0;">
    Контент с графическим водяным знаком
  </div>
</n-watermark>
  • width и height определяют размер изображения.
  • gap регулирует расстояние между повторениями.
  • rotate поворачивает изображение по оси.

Компонент автоматически повторяет изображение по всей области контейнера.

Динамический водяной знак

С помощью реактивных данных можно динамически изменять текст или изображение водяного знака. Это удобно для отображения текущего пользователя, даты или статуса документа.

<template>
  <n-watermark :content="watermarkText">
    <div style="width: 400px; height: 200px; background-color: #fafafa;">
      Динамический контент
    </div>
  </n-watermark>
</template>

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

const watermarkText = ref('Пользователь: Иванов');

setTimeout(() => {
  watermarkText.value = 'Пользователь: Петров';
}, 5000);
</script>
  • Изменение реактивного свойства watermarkText автоматически обновляет отображение водяного знака без перезагрузки страницы.

Продвинутые стили

Для более сложной стилизации можно использовать CSS-переменные, которые Naive UI поддерживает для Watermark:

  • --n-watermark-font — задаёт шрифт.
  • --n-watermark-color — цвет текста.
  • --n-watermark-opacity — прозрачность.

Пример применения CSS-переменных:

<n-watermark content="Секретно" class="custom-watermark">
  <div style="width: 500px; height: 300px; background-color: #fff;">
    Контент с кастомными стилями
  </div>
</n-watermark>

<style scoped>
.custom-watermark {
  --n-watermark-font: 18px 'Courier New', monospace;
  --n-watermark-color: rgba(255, 0, 0, 0.2);
  --n-watermark-opacity: 0.2;
}
</style>

Watermark внутри прокручиваемых контейнеров

Если водяной знак используется внутри контейнера с прокруткой, важно, чтобы он масштабировался вместе с контентом. Для этого компонент поддерживает свойство z-index и адаптивное позиционирование:

<n-watermark content="Важная информация" :z-index="10">
  <div style="width: 100%; height: 600px; overflow: auto; background-color: #eaeaea;">
    <div style="height: 1200px;">Длинный прокручиваемый контент</div>
  </div>
</n-watermark>
  • z-index позволяет разместить водяной знак поверх любого контента, сохраняя его видимость.
  • Watermark повторяет изображение или текст по всей высоте контейнера автоматически.

Практические рекомендации

  • Для текстовых водяных знаков лучше использовать полупрозрачные цвета, чтобы не мешать чтению контента.
  • Для изображений рекомендуется использовать PNG с прозрачным фоном.
  • Углы поворота в диапазоне -45 до 45 градусов обеспечивают наиболее естественное распределение.
  • Использование реактивных свойств позволяет обновлять водяной знак без перерисовки всего блока.

Watermark в Naive UI обеспечивает лёгкую интеграцию защиты контента и фирменного оформления, сочетая текстовые и графические элементы с полной настройкой стилей и адаптивностью к различным контейнерам.

Оглавление