Highlight
Компонент Highlight подсвечивает совпадения поискового запроса в тексте. Поддерживает одиночный запрос, массив запросов и кастомизацию стилей подсветки.
Обзор
- Основное назначение: визуальное выделение частей текста, совпадающих с поисковым запросом.
- Ключевые возможности:
- Подсветка одного или нескольких поисковых запросов.
- Регистронезависимый поиск.
- Экранирование специальных символов в запросе.
- Нестилизованный режим (
unstyled). - Кастомный класс подсветки (
highlightClass).
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
children | String | Number | '' | Текст, в котором выполняется поиск и подсветка. |
query | String | Number | Array | Поисковый запрос. Может быть строкой, числом или массивом строк/чисел. | |
unstyled | Boolean | false | Убирает стили подсветки по умолчанию. |
highlightClass | String | Дополнительные CSS-классы для элемента <mark>. |
Слоты
Компонент не использует слоты. Содержимое передаётся через проп children.
Особенности работы
- Без запроса: если
queryпуст или не передан, текст отображается без подсветки. - Несколько запросов: при передаче массива в
queryподсвечиваются совпадения по всем элементам массива. - Экранирование: специальные символы RegExp экранируются для предотвращения ошибок.
Базовое использование
<Highlight :children="text" query="поиск" />