vue点击鼠标右键自定义菜单弹窗

主题思路:点击鼠标右键(@contextmenu.prevent阻止右键菜单(浏览器行为)),获取当前鼠标点击的坐标位置，展示自定义菜单。

1.html部分

        <div class="leftTree">
            <div class="top">
                <div style="display:flex">
                    <div class="imgBox"><img src="../../assets/img/bm.png" alt=""></div>
                    <span style="line-height:35px;">部门</span>
                </div>
                <div style="line-height:35px;color:#299d26">右键[新增/修改]</div>
            </div>
            <el-tree :data="dataTree" :props="defaultProps" accordion @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }" @contextmenu.prevent="open($event, data)">
                    <span>
                        <i :class="data.icon"></i>{{ data.title }}
                    </span>
                </span>
            </el-tree>
            <!-- 通过右击获取到的坐标定位 -->
            <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="newcontextmenu">
                <li @click="addDepartment('新增下级')"><i class="el-icon-plus" style="color:#1e9fff"></i> 新增下级</li>
                <li @click="addDepartment('新增同级')"><i class="el-icon-plus" style="color:#1e9fff"></i>新增同级</li>
                <li @click="modify"><i class="el-icon-edit" style="color:#fcc465"></i>编辑</li>
                <li @click="deleteDepartment"><i class="el-icon-delete" style="color:red"></i>删除</li>
            </ul>
        </div>
<style lang="scss">
.leftTree {
        width: 15%;

        .top {
            display: flex;
            justify-content: space-between;
            border-bottom: 3px solid #1e9fff;
            font-size: 14px;

            .imgBox {
                width: 30px;
                height: 30px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>

2.js内容

<script>
export default {
    components: {},
    data() {
        return {
            //以下是自定义菜单数据
            visible: false,
            top: 0,
            left: 0,
        }
    },
    methods: {
        //右击编辑或修改菜单栏
        open(e, data) {
            this.clickData = data
            var x = e.pageX + 50; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
            var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
            this.top = y;
            this.left = x;
            this.visible = true; //显示菜单
            //右击全部不展示右击新增菜单
            if (data.title == "全部") {
                this.visible = false;
            }
        },
        //关闭菜单
        closeMenu() {
            this.visible = false;
        },
    },
    watch: {
        //   监听属性对象，newValue为新的值，也就是改变后的值
        visible(newValue) {
            if (newValue) {
                //菜单显示的时候
                // document.body.addEventListener，document.body.removeEventListener它们都接受3个参数
                // ("事件名" , "事件处理函数" , "布尔值");
                // 在body上添加事件处理程序
                document.body.addEventListener("click", this.closeMenu);
            } else {
                //菜单隐藏的时候
                // 移除body上添加的事件处理程序
                document.body.removeEventListener("click", this.closeMenu);
            }
        },
    },
}
</script>

3.效果图