vue3-rightmenus

基于Vue 3.x的右键上下文菜单

一、下载

npm i vue3-rightmenus

二、引入

// main.ts
import "vue3-rightmenus/dist/css/default.css";
import rightMenus from "vue3-rightmenus";
const app = createApp(App)
app.use(rightMenus);

三、使用

<template>
  <div>
    <div class="box" v-rightMenu:contextmenu="{ id: 123 }">右键点击我2222</div>
    <v-rightmenus ref="contextmenu" @show="showMenuBox">
      <v-rightmenus-item> 授权 </v-rightmenus-item>
      <v-rightmenus-divider />
      <v-rightmenus-submenu title="排序方式">
        <v-rightmenus-item>名称</v-rightmenus-item>
        <v-rightmenus-item>日期</v-rightmenus-item>
        <v-rightmenus-submenu title="更多">
          <v-rightmenus-item>大小</v-rightmenus-item>
          <v-rightmenus-item>标记</v-rightmenus-item>
          <v-rightmenus-item>类型</v-rightmenus-item>
        </v-rightmenus-submenu>
      </v-rightmenus-submenu>
      <v-rightmenus-item disabled>测试</v-rightmenus-item>
      <v-rightmenus-divider />
      <v-rightmenus-item>打开属性</v-rightmenus-item>
    </v-rightmenus>
  </div>
</template>
<script setup lang="ts">
const showMenuBox = (options: any) => {
  console.log("回调参数", options);
};
</script>