Скрываемая строка поиска

Реализация динамических и отзывчивых элементов интерфейса, таких как скрываемая строка поиска, становится значительно проще и элегантнее с использованием Vue.js. Его реактивная природа позволяет управлять состоянием компонента (например, видимостью поля) буквально в несколько строк кода, избавляя от сложных манипуляций с DOM и делая код чистым и поддерживаемым.

Убедитесь в этом сами — нажмите на значок лупы, чтобы увидеть плавное появление поисковой строки.

Ниже представлен исходный код, который реализует этот интерактивный элемент. Он наглядно демонстрирует простоту и мощь Vue.

<div id="app">
  <form>
    <div class="app-form-group">
      <input class="app-input" :class="{show: isShown}" type="text" placeholder="Поиск...">
      <button class="app-btn" @click.prevent="handleBtn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
          <path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z" fill="#666" />
        </svg>
      </button>
    </div>
  </form>
</div>

#app {
  --tr: .3s ease-in-out;  
  font-size: 18px;
}
#app form{
    display: grid;
    justify-items: center;
}
.app-form-group {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: 50px;
  background-color: #F2F3F4;
  border-radius: 6px;
}
.app-input {
  display: block;
  width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
  font-size: inherit;
  border: none;
  opacity: 0;
  transition: var(--tr);
  transition-property: width, padding-left, opacity;
}
.app-input.show {
  width: 240px;
  padding-left: 10px;
  opacity: 1;
}
.app-btn {
  aspect-ratio: 1/1;
  width: auto;
  height: 100%;
  background-color: transparent;
  border: none;
}
.app-btn svg {
  width: 80%;
  height: 80%;
}

const {createApp, ref} = Vue
createApp({
    setup() {    
        let isShown = ref(false)
        function handleBtn() {
			return isShown.value = !isShown.value
		}
        return {isShown, handleBtn}
    } 
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как это работает?

Логика Vue.js: Ключевой элемент — реактивная переменная isShown, которая определяет, показано ли поле ввода. При клике на кнопку вызывается метод handleBtn, который инвертирует значение isShown. Это яркий пример реактивности Vue — изменение состояния автоматически обновляет внешний вид компонента.
Визуальная часть: Поле ввода input.app-input имеет начальную нулевую ширину и прозрачность. При добавлении класса .show (который привязывается к переменной isShown через директиву :class) применяются CSS-правила, плавно увеличивающие ширину поля и меняющие его прозрачность с помощью перехода transition. Это создает эффект мягкого выезда.
Директива @click.prevent: Эта директива Vue слушает событие клика на кнопке. Модификатор .prevent автоматически вызывает event.preventDefault(), предотвращая перезагрузку страницы при отправке формы, что часто является желаемым поведением для таких интерактивных элементов.

Этот компонент — отличная основа, которую можно адаптировать под любой дизайн и расширить функционалом (например, отправкой поискового запроса или добавлением фильтров).

Нужен подобный интерактивный элемент для вашего сайта?

Представленный выше компонент — лишь небольшая иллюстрация наших возможностей. Мы готовы разработать для вас не только стильные UI-элементы, но и сложные веб-приложения, используя современные технологии, такие как Vue.js.

Обращайтесь в нашу веб-студию! Мы создадим интуитивно понятный, быстрый и эффективный интерфейс, который понравится вашим пользователям и решит ваши бизнес-задачи.

Предыдущий Следующий