Откройте раскрывающийся список, щелкнув правой кнопкой мыши в Vue3 и Vuetify3

Я пытаюсь работать с контекстным меню для Vue3. Я хочу показать список элементов под v-menu, щелкнув правой кнопкой мыши кнопку раскрывающегося списка. Я работаю над этой ссылкой в качестве ссылки, но когда я попытался сделать то же самое в своем файле Vue3, это дает мне такую ошибку:

Может ли кто-нибудь предложить, что я делаю неправильно? Вот код-

<v-menu offset-y>
  <template v-slot:activator = "{ props }">
    <v-btn
      color = "primary"
      dark
      v-bind = "props"
      @contextmenu.prevent = "props.click"
      >
      Dropdown
    </v-btn>
  </template>
  <v-list>
    <v-list-item
      v-for = "(item, index) in menuClick"
      :key = "index"
      @click = ""
      >
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

vue.js vue-component vuejs3 vuetify.js vuetifyjs3

14.02.2023 01:28

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не смог обнаружить ни одного события context menu в документе Vue3 и API меню Vuetify. Хотя у меня есть альтернатива, которая может выполнить эту работу. Вы можете использовать синхронизацию модификатора .right с v-model, чтобы открыть меню правым щелчком кнопки.

Вот стратегия-

Используйте v-model для управления статусом переключения v-menu.
Щелкнув правой кнопкой мыши, установите для v-model значение true, чтобы меню было открыто.
При щелчке левой кнопкой мыши (по умолчанию) установите для v-model значение false. (Выполняйте этот шаг, только если вы не хотите открывать меню по щелчку по умолчанию.)

Вот работающая демо-

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    menu: false,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
}).use(vuetify).mount('#app')

<script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id = "app">
  <v-app>
    <div class = "d-flex justify-space-around mb-5 font-weight-bold">
      I will open only with the right-click.
    </div>
    <div class = "d-flex justify-space-around">
      <v-menu v-model = "menu">
        <template v-slot:activator = "{ props }">
          <v-btn
            color = "primary"
            v-bind = "props"
            @click.left.prevent = "menu = false"
            @click.right.prevent = "menu = true"
            >
            Dropdown
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for = "(item, index) in items"
            :key = "index"
            :value = "index"
            >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

Спасибо. Это сработало прекрасно. Надеюсь, что контекстное меню скоро будет реализовано в vue3.

— 20.02.2023 02:11

14.02.2023 06:10