Vue右键菜单(vue-contextmenu)

使用右键点击出现删除，以及更多操作菜单，需要多个可以在​​注释//菜单选项处​​menulists下多添加几个对象，并且绑定需要响应的methods

安装

npm install vue-contextmenu --save

main.js引入

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

使用

<template>
        <div
                id="app"
                @contextmenu="showMenu"
                style="
                        width: 100px;
                        height: 100px;
                        margin-top: 20px;
                        background: red;
                "
        >
                <vue-context-menu
                        style="
                                width: 150px;
                                background: #eee;
                                margin-left: auto;
                        "
                        :contextMenuData="contextMenuData"
                        @deletedata="deletedata"
                ></vue-context-menu>
        </div>
</template>
<script>
export default {
        name: "app",
        data() {
                return {
                        // 菜单数据
                        contextMenuData: {
                                menuName: "demo",
                                //菜单显示的位置
                                axis: {
                                        x: null,
                                        y: null,
                                },
                                //菜单选项
                                menulists: [
                                        {
                                                fnHandler: "deletedata",
                                                btnName: "删除当前数据",
                                        },
                                ],
                        },
                };
        },
        methods: {
                showMenu() {
                        event.preventDefault();
                        var x = event.clientX;
                        var y = event.clientY;
                        // Get the current location
                        this.contextMenuData.axis = {
                                x,
                                y,
                        };
                },
                deletedata() {
                        console.log("delete!");
                },
        },
};
</script>