1、新建一个名为ContextMenu.vue的文件 <template> <div ref="containerRef"> <slot></slot> <Teleport to="body"> <Transition @beforeEnter="handleBeforeEnter" @enter="handleEnter" @afterEnter="handleAfterEnter"> <div v-if="showMenu" class="context-menu" :style="{ left: x + 'px', top...
1npm install v-contextmenu-vue3 # 假设存在的Vue 3兼容 库名 2# 或者 3yarn add v-contextmenu-vue3 2.全局注册在你的项目的入口文件（如main.js）中全局注册该组件：Javascript 1import { createApp } from'vue';2import VContextMenu from'v-contextmenu-vue3'; // 替换为实际的Vue3组件库 3...
拆分两个函数,一个打开openMenu函数,一个关闭函数closeMenu。 最后在window.oncontextmenu的匿名函数里去调取这两个函数。 然后我们将这三个变量暴露出去。 八. 右键菜单的使用方法 我们进到scope的.vue组件内,引入。 这样我们既可以通过右键创建这个菜单栏,也可以自己在合适的时间去做一些逻辑判断手动打开。 效果如...
import type { MenuProps, menu } from '@/types/menu' /** 父组件传参 * @param menu_list 菜单列表 */ const { menu_list, homePath } = defineProps<MenuProps>() const route = useRoute() /** * 通过路径获取菜单项 * * @param menu_list 菜单列表 * @param path 菜单路径 * @returns ...
一个使用 Vue3 制作的简洁美观简单的右键菜单组件 特性 简洁易用,体积小 提供组件模式和函数模式,调用方便 提供多个菜单主题供您使用 可自定义 用法 npm install -save @imengyu/vue3-context-menu 然后在 main.ts 中导入: import'@imengyu/vue3-context-menu/lib/vue3-context-menu.css'importContextMenufrom...
在上一篇讲到弹出框弹出时,右键tab标签,调用弹出框组件的onShowContextmenu方法显示弹出框时,onShowContextmenu就绑定了tab的路由,将menu赋值给了state.menu,在弹出框的标签点击事件onContextmenuItem就将state.menu赋值给了item.menu。 赋值在代码的61和82行。
import { createApp } from "vue"; import App from "./App.vue"; import Contextmenu from "contextmenu"; import "contextmenu/dist/index.css"; createApp(App).use(Contextmenu).mount("#app"); Attr 和 event 属性名说明类型默认值 options 配置菜单的数组。例子:[{command: 'copy', text: '复...
npm install -save @imengyu/vue3-context-menu Then import in the main.ts file: import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css' import ContextMenu from '@imengyu/vue3-context-menu' createApp(App).use(ContextMenu) Then you can use the ContextMenu in the .vue file: ...
使用@contextmenu.prevent检测右键事件 准备一个 ul 的列表,可以搭配transition在切换时做下动画 //右键事件//打开ul列表显示,通过传入的affix和fullPath控制ul列表的显示隐藏和禁用状态,调整ul的left和top属性防止溢出const handleContextMenu=(e: any, fullPath: string, affix?: boolean) => {showFilterMenu(full...
定义一个组件入口,规范并处理入参。 <template> <div class="full" v-show="modelValue.status" style="position: fixed;top:0;left:0;user-select: none;" @contextmenu.prevent=""> <div class="full" @click="handle_click" @contextmenu.prevent.stop="handle_click"></div> ...