Ellipsis и обрезка текста

В библиотеке Naive UI управление длинными строками текста реализуется с помощью компонента NEllipsis. Этот компонент обеспечивает аккуратное обрезание текста с добавлением многоточия и поддерживает различные сценарии отображения, включая ограничение по количеству строк и настройку интерактивного поведения.

Импорт и базовое использование

Для начала необходимо импортировать компонент из библиотеки:

import { NEllipsis } from 'naive-ui';

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

<template>
  <n-ellipsis>
    Это пример очень длинного текста, который необходимо корректно обрезать с помощью компонента NEllipsis.
  </n-ellipsis>
</template>

В этом случае текст автоматически обрезается по ширине родительского контейнера и добавляется многоточие.

Ограничение количества строк

Компонент поддерживает свойство rows, позволяющее задать максимальное количество отображаемых строк:

<n-ellipsis :rows="2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</n-ellipsis>

Ключевые моменты:

  • rows принимает числовое значение, определяющее видимое количество строк.
  • Если текст превышает указанное количество строк, добавляется многоточие.
  • Поддерживаются динамические размеры контейнера при изменении ширины или высоты.

Настройка многоточия и окончания

С помощью свойства suffix можно добавить кастомный текст после обрезки:

<n-ellipsis :rows="1" suffix="...читать далее">
  Это очень длинный текст, который нужно обрезать...
</n-ellipsis>

Особенности:

  • suffix не учитывается при расчете длины видимого текста.
  • Можно использовать HTML или Vue-слоты для более сложного оформления окончания.

Автоматическая подсказка полного текста

Компонент NEllipsis поддерживает автоматический тултип через свойство showTooltip. Полный текст становится доступен при наведении:

<n-ellipsis :rows="1" :show-tooltip="true">
  Длинный текст, который не помещается в одну строку и требует отображения полного содержимого.
</n-ellipsis>

Примечания:

  • Тултип создается автоматически и наследует стили библиотеки.
  • Можно отключить тултип для отдельных случаев или кастомизировать его через слот tooltip.

Управление поведением с помощью слотов

Для полного контроля над содержимым и окончанием текста используются слоты:

<n-ellipsis :rows="2">
  <template #default>
    Пользовательский <strong>текст</strong> с разметкой
  </template>
  <template #suffix>
    ...подробнее
  </template>
</n-ellipsis>

Преимущества использования слотов:

  • Возможность вставки любых Vue-компонентов внутри текста.
  • Полный контроль над стилями окончания.
  • Поддержка динамического контента и реактивных данных.

Адаптивное обрезание текста

NEllipsis корректно работает при изменении размеров контейнера благодаря встроенному слежению за размером. Это обеспечивает:

  • Автоматическое пересчет текста при изменении ширины блока.
  • Сохранение многоточия на конце после ресайза.
  • Поддержку flex и grid-контейнеров без дополнительных настроек.
<div style="width: 200px;">
  <n-ellipsis :rows="1">
    Текст, который обрезается в зависимости от ширины контейнера.
  </n-ellipsis>
</div>

Комбинация с другими компонентами Naive UI

NEllipsis можно использовать совместно с другими компонентами, например, NCard, NButton или NTooltip, для создания сложных интерфейсов:

<n-card title="Заголовок">
  <n-ellipsis :rows="2" :show-tooltip="true">
    Текст внутри карточки, который может быть очень длинным и должен корректно обрезаться.
  </n-ellipsis>
</n-card>

Особенности:

  • Сохраняется визуальная целостность интерфейса.
  • Можно комбинировать с кнопками или ссылками внутри текста.
  • Поддерживается реактивное обновление содержимого карточки.

Настройка стилей и кастомизация

Компонент допускает стилизацию через CSS или inline-стили. Например, можно задать цвет текста, размер шрифта или поведение многоточия:

<n-ellipsis :rows="1" style="color: #555; font-size: 14px;">
  Стилизованный текст с обрезкой.
</n-ellipsis>

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

:root {
  --n-ellipsis-font-size: 16px;
  --n-ellipsis-color: #333;
}

Динамическое управление

Для динамического изменения текста или количества строк используется реактивность Vue:

<template>
  <n-ellipsis :rows="rows">
    {{ dynamicText }}
  </n-ellipsis>
  <n-button @click="rows++">Увеличить строки</n-button>
</template>

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

const rows = ref(1);
const dynamicText = ref('Очень длинный текст, который может изменяться со временем...');
</script>

Возможности:

  • Изменение количества строк без перезагрузки компонента.
  • Реактивное обновление текста, например, при загрузке данных с сервера.
  • Поддержка любых событий Vue для интерактивного поведения.

Итоговая структура свойств NEllipsis

Свойство Тип Описание
rows number Максимальное количество строк текста
suffix string Текст, добавляемый после обрезки
show-tooltip boolean Включение тултипа с полным текстом
placement string Позиция тултипа (top, bottom, left, right)
tooltip-class string Пользовательский CSS-класс для тултипа
ellipsis-class string CSS-класс для стилизации самого текста с многоточием
expandable boolean Возможность раскрытия полного текста через клик
expand-text string Кастомный текст кнопки раскрытия
collapse-text string Кастомный текст кнопки сворачивания

Этот функционал делает NEllipsis гибким инструментом для управления длинным текстом в интерфейсах Naive UI, обеспечивая адаптивность, интерактивность и точный контроль над визуальной подачей контента.

Оглавление