Нативные меню и диалоги

Quasar предоставляет мощный набор компонентов для работы с нативными меню и диалогами, позволяя создавать удобный и единообразный пользовательский интерфейс на всех платформах. Основными инструментами для реализации интерактивных окон и контекстных меню являются компоненты QMenu, QDialog, QPopupEdit, QContextMenu и встроенные утилиты для уведомлений и подтверждений.

QMenu: контекстные и выпадающие меню

QMenu используется для создания выпадающих меню и контекстных списков. Меню может быть прикреплено к любому элементу страницы и открываться по клику или наведению.

Пример базового меню:

<template>
  <q-btn label="Меню" @click="menu = true" />
  <q-menu v-model="menu">
    <q-list>
      <q-item clickable v-ripple @click="action('Первый пункт')">
        <q-item-section>Первый пункт</q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="action('Второй пункт')">
        <q-item-section>Второй пункт</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: false
    };
  },
  methods: {
    action(item) {
      console.log(item);
      this.menu = false;
    }
  }
};
</script>

Ключевые моменты QMenu:

  • v-model управляет открытием меню.
  • clickable и v-ripple обеспечивают интерактивность.
  • Можно создавать вложенные меню через QItem с QMenu внутри.

QDialog: модальные диалоги

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

Пример простого диалога:

<template>
  <q-btn label="Открыть диалог" @click="dialog = true" />
  <q-dialog v-model="dialog">
    <q-card>
      <q-card-section>
        Подтвердите действие
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="Отмена" @click="dialog = false" />
        <q-btn flat label="OK" @click="confirmAction" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  data() {
    return { dialog: false };
  },
  methods: {
    confirmAction() {
      console.log('Действие подтверждено');
      this.dialog = false;
    }
  }
};
</script>

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

  • Можно использовать persistent, чтобы запретить закрытие кликом по фону.
  • maximized и full-width/full-height для полноэкранных диалогов.
  • Поддержка динамического контента через слоты.

QPopupEdit: редактируемые всплывающие элементы

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

Пример редактирования текста:

<template>
  <q-input filled v-model="text">
    <template v-slot:append>
      <q-popup-edit v-model="text" auto-save>
        <q-input v-model="text" autofocus />
      </q-popup-edit>
    </template>
  </q-input>
</template>

<script>
export default {
  data() {
    return { text: 'Редактируемый текст' };
  }
};
</script>

Преимущества QPopupEdit:

  • Мгновенное сохранение при auto-save.
  • Поддержка любых компонентов внутри для расширенной функциональности.
  • Можно комбинировать с QMenu для создания сложных интерактивных элементов.

Контекстные меню: QContextMenu

Для реактивных контекстных меню используется комбинация QMenu и пользовательских событий @contextmenu. Это позволяет создать нативное поведение правого клика с кастомной логикой.

<template>
  <div @contextmenu.prevent="openMenu($event)">
    Правый клик по этому блоку
  </div>
  <q-menu v-model="menu" :anchor="anchor" self="top left">
    <q-list>
      <q-item clickable v-ripple @click="action('Удалить')">
        <q-item-section>Удалить</q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="action('Копировать')">
        <q-item-section>Копировать</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: false,
      anchor: { top: 0, left: 0 }
    };
  },
  methods: {
    openMenu(event) {
      this.anchor = { top: event.clientY, left: event.clientX };
      this.menu = true;
    },
    action(name) {
      console.log(name);
      this.menu = false;
    }
  }
};
</script>

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

  • Позиционирование относительно курсора.
  • Можно комбинировать с QDialog и другими компонентами для сложного UX.

Уведомления и подтверждения: $q.dialog и $q.notify

Для быстрого создания диалогов и уведомлений можно использовать глобальные методы q.dialog * *и * *q.notify.

Пример подтверждения:

this.$q.dialog({
  title: 'Удаление',
  message: 'Вы действительно хотите удалить элемент?',
  cancel: true,
  persistent: true
}).onOk(() => {
  console.log('Элемент удален');
}).onCancel(() => {
  console.log('Удаление отменено');
});

Пример уведомления:

this.$q.notify({
  type: 'positive',
  message: 'Данные успешно сохранены',
  position: 'top-right',
  timeout: 3000
});

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

  • Мгновенное создание диалогов без разметки в шаблоне.
  • Поддержка различных типов уведомлений: positive, negative, warning, info.
  • Простая интеграция с логикой приложений на Vue.

Советы по работе с нативными меню и диалогами

  1. Использовать v-model для управления состоянием компонентов.
  2. Для сложных интерфейсов комбинировать QMenu и QPopupEdit.
  3. Контекстные меню должны реагировать на @contextmenu с prevent.
  4. Модальные окна должны быть persistent, если требуется обязательное взаимодействие пользователя.
  5. Для динамических уведомлений и простых подтверждений использовать q.dialog * *и * *q.notify вместо ручной разметки.

Эти инструменты позволяют создавать интуитивно понятные, отзывчивые интерфейсы с нативным поведением на всех устройствах.

Оглавление