<script>
import { ContextMenu, ContextMenuDirective } from '@/plugins/ContextMenu';
export default {
    directives: {
        // 引入指令式 指令式写法见下文
        'v-contextmenu': ContextMenuDirective
    },
    methods: {
        openMenu() {
            // 引入函数式
            ContextMenu({
                event, // 传入鼠标事件
                menu: [
                    { icon: 'el-icon-view', name: this.$t('button.view'), action: 'view' },
                    { icon: 'el-icon-edit', name: this.$t('button.edit'), action: 'edit' },
                    { icon: 'el-icon-delete', name: this.$t('button.delete'), action: 'delete' }
                ]
            }).then(rs => {
                switch (rs) {
                    case 'view':
                        this.viewFn();
                        break;
                    case 'edit':
                        this.editFn();
                        break;
                    case 'delete':
                        this.deleteFn();
                        break;
                }
            });
        }
    }
};
</script>

<template>
    <div class="panel__wrap" v-contextmenu="menu">
        some inner html or other ...
    </div>
</template>
<script>
// 以下两种场景均以全局引入方式引入
export default {
    methods: {
        viewFn(event) {},
        editFn(event) {},
        deleteFn(event) {}
    },
    computed: {
        menu () {
            return [{
                icon: 'el-icon-view',
                name: this.$t('button.view'),
                fn: this.viewFn
            }, {
                icon: 'el-icon-edit',
                name: this.$t('button.edit'),
                fn: this.editFn
            }, {
                icon: 'el-icon-delete',
                name: this.$t('button.delete'),
                fn: this.deleteFn
            }]
        }
    }
};
</script>

<template>
    <el-table @row-contextmenu="rowContextmenu">
        some inner html or other ...
    </el-table>
</template>
<script>
export default {
    data() {
        return {
            tableData: []
        };
    },
    methods: {
        rowContextmenu(row, event) {
            this.$ContextMenu({
                event, // 传入鼠标事件
                menu: [
                    { icon: 'el-icon-view', name: this.$t('button.view'), action: 'view' },
                    { icon: 'el-icon-edit', name: this.$t('button.edit'), action: 'edit' },
                    { icon: 'el-icon-delete', name: this.$t('button.delete'), action: 'delete' }
                ]
            }).then(rs => {
                switch (rs) {
                    case 'view':
                        this.viewFn();
                        break;
                    case 'edit':
                        this.editFn();
                        break;
                    case 'delete':
                        this.deleteFn();
                        break;
                }
            });
        }
    }
};
</script>

<template>
    <el-table @row-contextmenu="rowContextmenu">
        some inner html or other ...
    </el-table>
</template>
<script>
export default {
    data() {
        return {
            tableData: []
        };
    },
    methods: {
        rowContextmenu(row, event) {
            this.$ContextMenu({
                event, // 传入鼠标事件
                menu: [
                    { icon: 'el-icon-view', name: this.$t('button.view'), fn: this.viewFn },
                    { icon: 'el-icon-edit', name: this.$t('button.edit'), fn: this.editFn },
                    { icon: 'el-icon-delete', name: this.$t('button.delete'), fn: this.deleteFn }
                ]
            });
        },
        viewFn(event) {},
        editFn(event) {},
        deleteFn(event) {}
    }
};
</script>