vue--右击菜单的简单实现

最新推荐文章于 2024-08-10 17:50:25 发布

林儿_daisy

最新推荐文章于 2024-08-10 17:50:25 发布

阅读量352

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_39704065/article/details/109594017

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用Vue.js和Element UI实现自定义右键菜单的方法。通过结合@clickoutside指令和contextmenu事件，可以创建响应式的右键菜单。该菜单包含编辑和删除两个选项，并能够根据鼠标点击位置动态调整其出现的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：

<template>
<div @contexmenu.prevent.native="createRightMenu($event)">菜单</div>
<div id="rightMenu" v-clickoutside="handleClose">
    // 可添加菜单内容
    <el-button>编辑</el-button>
    <el-button>删除</el-button>
</div>
</template>

import Clickoutside from "element-ui/src/utils/clickoutside "
<script>
    data: {
        showRightMenu: false
    }   
    directives: { Clickoutside }
    methods: {
        createRightMenu(event) {
          let right = document.getElementById('rightMenu')
          right.style.position = "absolute"
          right.style.left = event.pageX + 20 +'px'
          right.style.right= event.pageY - 20 +'px'
          this.showRightMenu = true
        },

        handleClose() {
            this.showRightMenu = false
        }
    }
</script>