Link

Компонент ElLink предназначен для создания интерактивных ссылок с расширенными возможностями кастомизации и стилизации по сравнению с обычным HTML-тегом <a>. Он полностью интегрирован с Vue 3 и предоставляет удобный способ управления поведением ссылок, включая стили, события и поддержку иконок.

Основная структура

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

<template>
  <el-link href="https://element-plus.org" target="_blank">
    Официальный сайт Element Plus
  </el-link>
</template>

Ключевые атрибуты:

  • href – URL, на который будет вести ссылка. Если не указан, ссылка может работать как кнопка.

  • target – определяет, где откроется ссылка (_blank, _self, _parent, _top).

  • type – тип ссылки для стилизации. Доступные значения:

    • primary
    • success
    • warning
    • danger
    • info

  • underline – логическое значение, определяющее наличие подчеркивания. По умолчанию true.

  • disabled – делает ссылку неактивной, аналогично disabled в кнопках.

  • icon – добавляет иконку перед текстом ссылки.

Стилизация ссылок

Компонент позволяет легко управлять внешним видом:

<el-link type="primary" underline={false} icon="el-icon-link">
  Ссылка без подчеркивания
</el-link>
  • type изменяет цвет текста в соответствии с выбранной темой.
  • underline={false} убирает подчеркивание.
  • icon добавляет визуальный элемент перед текстом ссылки. Можно использовать встроенные иконки Element Plus или кастомные SVG.

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

ElLink поддерживает события клика и наведения:

<el-link @click="handleClick">
  Нажми меня
</el-link>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('Ссылка была нажата', event);
    }
  }
}
</script>
  • @click – основной обработчик события клика.
  • Дополнительно можно использовать стандартные DOM-события (mouseenter, mouseleave) для кастомного поведения.

Использование без href

Ссылка может быть интерактивной кнопкой без URL. Это полезно для действий внутри приложения:

<el-link type="success" @click="submitForm">
  Отправить форму
</el-link>

В этом случае ElLink ведет себя как кнопка с поддержкой всех стилей компонента.

Интеграция с роутером Vue

Для использования с Vue Router можно комбинировать ElLink с router-link:

<el-link :to="{ name: 'Home' }" type="primary">
  Перейти на главную
</el-link>
  • При передаче объекта to компонент автоматически работает как router-link.
  • Сохраняются все стили, подчеркивания и иконки.

Настройка доступности

  • Атрибут disabled предотвращает клики и изменяет стиль, показывая, что ссылка неактивна.
  • Компонент корректно поддерживает фокусировку клавиатурой, что важно для доступности.
<el-link type="danger" disabled>
  Недоступная ссылка
</el-link>

Использование с иконками

Комбинация текста и иконок позволяет создавать наглядные и информативные ссылки:

<el-link type="info" icon="el-icon-info" underline={false}>
  Подробнее
</el-link>
  • Иконка располагается перед текстом.
  • При необходимости можно стилизовать иконку через CSS или использовать слоты для более сложной структуры.

Стилизация через CSS

Можно расширять визуальный стиль компонента через кастомные классы:

<el-link class="custom-link">
  Кастомная ссылка
</el-link>

<style>
.custom-link {
  color: #ff5722;
  font-weight: bold;
}
.custom-link:hover {
  text-decoration: underline;
}
</style>
  • Позволяет полностью интегрировать внешний вид в дизайн приложения.
  • Сохраняются возможности type и underline.

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

  • Использовать type для выделения важных ссылок в интерфейсе.
  • Для ссылок без перехода использовать обработчик @click, чтобы избежать лишней нагрузки на роутер.
  • Комбинировать иконки и текст для улучшения визуальной подсказки пользователю.
  • Всегда проверять доступность и корректность работы клавиатуры при кастомной стилизации.

Эти возможности делают ElLink универсальным инструментом для построения навигационных элементов и интерактивных действий в приложениях на Vue 3 с Element Plus.

Оглавление