技術標籤：Vue

使用右鍵點擊出現刪除，以及更多操作選單，需要多個可以在註釋//選單選項處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>

參考地址：https://blog.csdn.net/xyy1234567891/article/details/105047468/