Tag

Tag — компонент библиотеки Element Plus, предназначенный для отображения коротких меток, категорий, статусов и других компактных элементов интерфейса. Теги используются для визуального выделения информации: например, статусов задач, типов объектов, ключевых слов или фильтров.

Компонент реализует минималистичный и гибкий интерфейс, поддерживает различные стили, размеры, цвета, возможность закрытия и динамического создания.

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

Простейший тег создаётся при помощи компонента el-tag.

<template>
  <el-tag>Tag</el-tag>
</template>

Тег отображается как небольшой прямоугольный элемент с текстом. Контент тега определяется через слот.

Типы тегов

Для визуального разделения информации используются предопределённые типы. Тип влияет на цветовую схему.

Доступные значения свойства type:

  • success
  • info
  • warning
  • danger

Пример:

<template>
  <el-tag>Default</el-tag>
  <el-tag type="success">Success</el-tag>
  <el-tag type="info">Info</el-tag>
  <el-tag type="warning">Warning</el-tag>
  <el-tag type="danger">Danger</el-tag>
</template>

Каждый тип соответствует определённой цветовой палитре:

Тип Назначение
default нейтральные метки
success успешные операции
info информационные элементы
warning предупреждения
danger ошибки или критические состояния

Светлый и тёмный стиль (Effect)

Свойство effect управляет визуальным стилем тега.

Поддерживаются три режима:

  • light
  • dark
  • plain

Пример:

<template>
  <el-tag effect="light">Light</el-tag>
  <el-tag effect="dark">Dark</el-tag>
  <el-tag effect="plain">Plain</el-tag>
</template>

Описание режимов:

Effect Характеристика
light светлый фон, мягкие цвета
dark насыщенный цвет фона
plain прозрачный фон и цветная рамка

Размеры тегов

Размер определяется свойством size.

Возможные значения:

  • large
  • default
  • small

Пример:

<template>
  <el-tag size="large">Large</el-tag>
  <el-tag>Default</el-tag>
  <el-tag size="small">Small</el-tag>
</template>

Размер влияет на:

  • высоту тега
  • размер шрифта
  • внутренние отступы

Закрываемые теги

Теги могут быть закрываемыми. Для этого используется свойство closable.

<template>
  <el-tag closable>Closable Tag</el-tag>
</template>

При включении свойства появляется кнопка закрытия.

Событие закрытия:

<template>
  <el-tag closable @close="handleClose">Tag</el-tag>
</template>

<script setup>
const handleClose = () => {
  console.log('tag closed')
}
</script>

Событие close вызывается перед удалением тега.

Управление отображением тегов

Теги часто используются в динамических списках.

Пример:

<template>
  <el-tag
    v-for="tag in tags"
    :key="tag"
    closable
    @close="removeTag(tag)"
  >
    {{ tag }}
  </el-tag>
</template>

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

const tags = ref(['JavaScript', 'Vue', 'Element Plus'])

const removeTag = (tag) => {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

В этом примере:

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

Добавление новых тегов

Частый сценарий — возможность добавлять новые теги.

<template>
  <div>
    <el-tag
      v-for="tag in tags"
      :key="tag"
      closable
      @close="removeTag(tag)"
    >
      {{ tag }}
    </el-tag>

    <el-input
      v-if="inputVisible"
      v-model="inputValue"
      size="small"
      @keyup.enter="addTag"
      @blur="addTag"
    />

    <el-button v-else size="small" @click="showInput">
      + New Tag
    </el-button>
  </div>
</template>

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

const tags = ref(['Vue', 'JavaScript'])
const inputVisible = ref(false)
const inputValue = ref('')

const showInput = () => {
  inputVisible.value = true
}

const addTag = () => {
  if (inputValue.value) {
    tags.value.push(inputValue.value)
  }

  inputVisible.value = false
  inputValue.value = ''
}

const removeTag = (tag) => {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

Этот паттерн часто используется для:

  • тегов статей
  • ключевых слов
  • пользовательских меток

Цветовые теги

Свойство color позволяет задать пользовательский цвет.

<template>
  <el-tag color="#626aef">Custom</el-tag>
</template>

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

  • цвет применяется к фону
  • текст автоматически адаптируется

Используется для:

  • категорий
  • меток с уникальной палитрой
  • брендированных интерфейсов

События компонента

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

close

Срабатывает при нажатии кнопки закрытия.

<el-tag closable @close="handleClose">
  Tag
</el-tag>

Используется для:

  • удаления элемента
  • обновления состояния
  • синхронизации данных

Слоты

Компонент поддерживает основной слот для содержимого.

<el-tag>
  <span>Custom Content</span>
</el-tag>

Внутри тега можно размещать:

  • текст
  • иконки
  • другие элементы

Пример:

<el-tag>
  <el-icon><Edit /></el-icon>
  Edit
</el-tag>

Свойства компонента

Свойство Тип Описание
type string тип тега
closable boolean отображение кнопки закрытия
disable-transitions boolean отключение анимации
hit boolean стиль выделенной рамки
color string пользовательский цвет
size string размер тега
effect string визуальный стиль

Использование в интерфейсах

Компонент широко применяется для:

Категорий

Frontend
Backend
DevOps

Статусов

Active
Pending
Completed

Фильтров

Vue
React
Angular

Меток контента

JavaScript
TypeScript
UI

Практический пример: список статусов

<template>
  <div>
    <el-tag type="success">Active</el-tag>
    <el-tag type="warning">Pending</el-tag>
    <el-tag type="danger">Blocked</el-tag>
  </div>
</template>

Этот подход позволяет быстро визуально различать состояние объектов.

Стилизация тегов

Теги можно стилизовать через CSS.

.el-tag {
  margin-right: 8px;
}

Или через пользовательские классы:

<el-tag class="project-tag">
  Project
</el-tag>
.project-tag {
  font-weight: 600;
  border-radius: 12px;
}

Анимации

При удалении тегов применяется встроенная анимация.

Для отключения используется свойство:

<el-tag :disable-transitions="true">
  Tag
</el-tag>

Это полезно в интерфейсах с большим количеством тегов.

Архитектурные особенности

Компонент Tag реализован как лёгкий визуальный элемент без сложной логики состояния. Основные задачи компонента:

  • отображение меток
  • визуальная классификация данных
  • интерактивное удаление

Вся бизнес-логика (добавление, удаление, фильтрация) обычно реализуется на уровне родительского компонента.

Комбинирование с другими компонентами

Tag часто используется совместно с:

  • el-input
  • el-autocomplete
  • el-select
  • el-table

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

<el-table-column label="Status">
  <template #default="scope">
    <el-tag type="success">
      {{ scope.row.status }}
    </el-tag>
  </template>
</el-table-column>

Такой подход позволяет визуально структурировать данные в таблицах и списках.

Оглавление