分享记录vue3+ts的超简单且通俗易懂的右键菜单。

遇到个即时聊天项目，需要对对话框进行右键操作，例如撤回、复制、转发等，这里分享一个比较好用小白也能看懂的右键菜单vue3-menus库。开整！
一、安装引用
npm install vue3-menus
或
yarn add vue3-menus

// 全局注册组件、指令、方法
import { createApp } from 'vue';
import Menus from 'vue3-menus';
import App from './App.vue';
const app = createApp(App);
app.use(Menus);
app.mount('#app');
//或者在单个页面注册
import { defineComponent, shallowRef } from "vue";
import { menusEvent } from 'vue3-menus';

二、使用组件
//组件有三种方法可以实现，我这边用的是单页面注册
import { ref, reactive, toRefs, onMounted, defineComponent, shallowRef, nextTick } from 'vue'
import { menusEvent, directive, Vue3Menus } from 'vue3-menus';
1.自定义指令方式使用
 <div style="width: 500px;height: 500px;border:solid 1px black;" v-menus:right="menus">
    指令方式打开菜单
  </div>
const vMenus = directive
const menus = shallowRef({
  menus: [
    {
      label: "复制",
      tip: '复制改内容',
      click: () => {
        console.log('复制了');
      }
    },
    {
      label: "关闭",
      click: () => {
        console.log('关闭了');
      }
    }
  ]
});

2.事件方式打开菜单
<div style="width: 500px;height: 500px;border:solid 1px black;" @click.stop @contextmenu="rightClick">
    事件方式打开菜单
  </div>
const menus = shallowRef({
  menus: [
    {
      label: "复制",
      tip: '复制改内容',
      click: () => {
        console.log('复制了');
      }
    },
    {
      label: "关闭",
      click: () => {
        console.log('关闭了');
      }
    }
  ]
});
const rightClick = (event: any) => {
  menusEvent(event, menus.value, 0);
  event.preventDefault();
}
3.组件方式打开菜单
<div style="width: 500px;height: 500px;border:solid 1px black;" @contextmenu="rightClick">
    组件方式打开菜单
  </div>
  <vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menuss" hasIcon>
    <template #icon="{ item: { activeIndex } }">{{ activeIndex }}</template>
    <template #label="{ item: { item } }">插槽：{{ item.label }}</template>
  </vue3-menus>

let isOpen = ref(false);
const eventVal:any = ref({});
const rightClicks = (event: any) => {
  isOpen.value = false;
  nextTick(() => {
    eventVal.value = event;
    isOpen.value = true;
  })
  event.preventDefault();
}
const menuss = shallowRef([
  {
    label: "复制",
    tip: '复制改内容',
    click: () => {
      console.log('复制了');
    }
  },
  {
    label: "关闭",
    click: () => {
      console.log('关闭了');
    }
  }
]);
//最后附上最终效果图

 

 
三、整体代码

<template>
  <!-- <div style="width: 500px;height: 500px;border:solid 1px black;" v-menus:right="menus">
    指令方式打开菜单
  </div> -->
  <!-- <div style="width: 500px;height: 500px;border:solid 1px black;" @click.stop @contextmenu="rightClick">
    事件方式打开菜单
  </div> -->
  <div style="width: 500px;height: 500px;border:solid 1px black;" @contextmenu="rightClick">
    组件方式打开菜单
  </div>
  <vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menuss" hasIcon>
    <template #icon="{ item: { activeIndex } }">{{ activeIndex }}</template>
    <template #label="{ item: { item } }">插槽：{{ item.label }}</template>
  </vue3-menus>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, defineComponent, shallowRef, nextTick } from 'vue'
import { menusEvent, directive, Vue3Menus } from 'vue3-menus';
const vMenus = directive

let isOpen = ref(false);
const eventVal:any = ref({});
const rightClicks = (event: any) => {
  isOpen.value = false;
  nextTick(() => {
    eventVal.value = event;
    isOpen.value = true;
  })
  event.preventDefault();
}
const menuss = shallowRef([
  {
    label: "复制",
    tip: '复制改内容',
    click: () => {
      console.log('复制了');
    }
  },
  {
    label: "关闭",
    click: () => {
      console.log('关闭了');
    }
  }
]);
const menus = shallowRef({
  menus: [
    {
      label: "复制",
      tip: '复制改内容',
      click: () => {
        console.log('复制了');
      }
    },
    {
      label: "关闭",
      click: () => {
        console.log('关闭了');
      }
    }
  ]
});
const rightClick = (event: any) => {
  menusEvent(event, menus.value, 0);
  event.preventDefault();
}
</script>
<style scoped lang="scss"></style>

四、总结
一个简单的demo，使用方法比较简单，自身支持ts，右键后的逻辑和相关业务可以自己去补充调整。希望这个分享能帮助到像我一样的小白，哦对，最后附上官方gitee库地址https://gitee.com/longxinziyan/vue3-menus