Vue реализует контекстное меню за 1 минуту, евангелие для ленивых 😋

внешний интерфейс Vue.js
Vue реализует контекстное меню за 1 минуту, евангелие для ленивых 😋

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

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

визуализация

image.png

Установить

npm install vue-contextmenujs

или

yarn add vue-contextmenujs

CDN

<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">

использовать

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);

Внедрение CDN не требуетсяVue.use(Contextmenu)

Код

кelement-uiВозьмите значок в качестве примера для реализации контекстного меню, и значок будет отображаться как<i class="icon"></i>, код показан ниже:

<template>
  <div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>

<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
export default {
  methods: {
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: "返回(B)",
            onClick: () => {
              this.message = "返回(B)";
              console.log("返回(B)");
            }
          },
          { label: "前进(F)", disabled: true },
          { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
          { label: "另存为(A)..." },
          { label: "打印(P)...", icon: "el-icon-printer" },
          { label: "投射(C)...", divided: true },
          {
            label: "使用网页翻译(T)",
            divided: true,
            minWidth: 0,
            children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
          },
          {
            label: "截取网页(R)",
            minWidth: 0,
            children: [
              {
                label: "截取可视化区域",
                onClick: () => {
                  this.message = "截取可视化区域";
                  console.log("截取可视化区域");
                }
              },
              { label: "截取全屏" }
            ]
          },
          { label: "查看网页源代码(V)", icon: "el-icon-view" },
          { label: "检查(N)" }
        ],
        event, // 鼠标事件信息
        customClass: "custom-class", // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
      });
      return false;
    }
  }
};
</script>

опции менюitemsВ массиве вы можете настроить его в соответствии с вашими потребностями. В это время нажмите правую кнопку, и волшебным образом появится всплывающее окно меню.Не правда ли, это очень просто!

нестандартный стиль

Откройте консоль и посмотрите на элементы, чтобы увидеть название каждого класса меню. Самый внешний класс - это тот, что вышеcustomClassЗначение параметра настройки стиля можно настроить в соответствии с потребностями.

<style>
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
  background: #ffecf2 !important;
  color: #ff4050 !important;
}
</style>

image.png

Суммировать

Вышеупомянутый основной метод использования, экономит ли он много времени, чем упаковывать его самостоятельно. Учтите, что меню будет автоматически уничтожено при нажатии левой кнопки или прокрутке колесика, а также его можно вызватьthis.$contextmenu.destroy()Самоуничтожение в других сценах. Ниже приведена конфигурация параметров плагина:

Свойства меню MenuOptions

Атрибуты описывать Типы необязательное значение По умолчанию
items информация о структуре меню MenuItemOptions[] — —
event информация о событии мыши Event — —
x В меню отображается координата X, существуетeventтогда недействительный number — 0
y В меню отображается координата Y, существуетeventтогда недействительный number — 0
zIndex стиль менюz-index number — 2
customClass пользовательский класс меню string — —
minWidth Минимальная ширина главного меню number — 150

Свойства опции MenuItemOptions

Атрибуты описывать Типы необязательное значение По умолчанию
label название пункта меню string — —
icon иконка пункта меню, сгенерированная<i class="icon"></i>элемент string — —
disabled отключить ли пункт меню boolean — false
divided Показывать ли разделительную линию boolean — false
customClass пользовательский класс подменю string — —
minWidth минимальная ширина подменю number — 150
onClick событие щелчка пункта меню Function() — —
children Информация о структуре подменю MenuItemOptions[] — —

Добро пожаловать, чтобы оставить сообщение в области комментариев, официальный представитель Nuggets будет вПроект «Звезда раскопок»После события 100 штук Наггетсов будут разыграны в области комментариев. Если статья была вам полезна, не забудьте поставить лайк~

Я слышал, что люди, которым понравился персонаж этого года, взорвались, а бонус в конце года удвоился 🤩

Категории