Тег

Лёгкий тег. Семантические цвета type + форма round/hit + закрываемый.

Тег

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>По умолчанию</LhTag>
      <LhTag type="primary">Основной</LhTag>
      <LhTag type="success">Успех</LhTag>
      <LhTag type="warning">Предупреждение</LhTag>
      <LhTag type="danger">Опасность</LhTag>
      <LhTag type="info">Информация</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">Малый</LhTag>
      <LhTag size="medium">Размер по умолчанию</LhTag>
      <LhTag size="large">Большой</LhTag>
      <LhTag type="primary" round>Скруглённый</LhTag>
      <LhTag type="primary" hit>Контур (hit)</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">Закрываемый</LhTag>
      <LhTag v-if="!closed" type="info" round>Скрывается после закрытия</LhTag>
      <LhTag type="warning" disabled>Отключён</LhTag>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ closed: false }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
type	Семантический цвет	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	Размер	'small' \| 'medium' \| 'large'	'medium'
closable	Показывать кнопку закрытия (aria-label берётся из языкового пакета)	boolean	false
disabled	Отключено (перехват кнопки закрытия)	boolean	false
round / hit	Скругление / акцент контуром	boolean	false
onClose	Коллбэк закрытия (сосуществует с событием close)	(e: Event) => void	—
sx	Компактная раскладка	—	—

Events

Событие	Описание	Параметры обратного вызова
click	Срабатывает при клике	(e: MouseEvent)
close	Срабатывает при клике по кнопке закрытия (сосуществует с prop onClose)	(e: Event)