VUE 鼠标右键菜单组件

1.组件，分为Index.Vue，和Item.vue

//效果

 

1.此文件为index.Vue
<template>
  <transition name="fade">
    <div
      class="elx-context-menu"
      v-show="visible"
      :style="{width: width+'px', top: currentY+'px', left: currentX+'px'}">
      <ul>
        <context-menu-item
          v-for="item in data"
          :key="item.label"
          :data="item"
          :tip-show="tipShow"
          @action="action">
        </context-menu-item>
      </ul>
    </div>
  </transition>
</template>

<script>
import ContextMenuItem from './item';

export default {
    name: 'ContextMenu',
    componentName: 'ContextMenu',

    components: {
        ContextMenuItem
    },

   props: {
      width: {// 宽
        type: Number,
        default: 80
      },
      x: {// X坐标
        type: Number,
        default: 0
      },
      y: {// Y坐标
        type: Number,
        default: 0
      },
      data: {// 显示右键菜单的数据
        type: Array,
        default: function() {
          return [];
        }
      },
      visible: {// 是否显示右键菜单
        type: Boolean,
        default: false
      },
      tipShow: {// 是否显示提示
        type: Boolean,
        default: true
      }
    },
    data() {
        return {
            currentX: 0,
            currentY: 0
        };
    },
    methods: {
        action(data) {
            if (!data.disabled) {
                this.$emit('action', data);
            }
        },
        changePos() {
            const gap = 5;
            const bodyClientHeight = document.body.clientHeight;
            const bodyClientTop = document.body.clientTop;
            const height = this.$el.clientHeight;
            const elBottom = height + this.currentY;
            const viewHeight = bodyClientHeight + bodyClientTop;
            if (viewHeight < elBottom) {
                this.currentY = viewHeight - height - gap;
            }
        },
        handleDisplay() {
            this.contentMenuShow = false;
        }
    },
    watch: {
        visible(val) {
            if (val) {
                const self = this;
                self.$nextTick(() => {
                    self.changePos();
                });
            }
        },
        x(val) {
            this.currentX = val;
        },
        y(val) {
            this.currentY = val;
            this.changePos();
        }
    },
    created() {
        this.currentX = this.x;
        this.currentY = this.y;
    },
    mounted() {
        this.changePos();
        window.addEventListener('resize', this.handleDisplay);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleDisplay);
    }
};
</script>

2.item.vue

此文件为item.Vue

<template>

  <li
    :class="data.disabled?'disabled':''"
    @click.stop.prevent="exec"
    @mouseenter.stop.prevent="showChild"
    @mouseleave.stop.prevent="hideChild">
    <el-tooltip :content="data.label" placement="left" :hide-after="500" v-if="tipShow">
      <div class="elx-context-menu-title">
        <span :class="data.class">
          <span v-if="data.icon" :class="data.icon"></span>
          <span v-if="data.label" v-text="data.label"></span>
          <!-- <node-content :node="data"></node-content> -->
        </span>
        <template v-if="'children' in data">
          <span v-if="data.children.length>0" class="uex-icon-caret-right"></span>
        </template>
      </div>
    </el-tooltip>
    <div class="elx-context-menu-title" v-if="!tipShow" :title="data.label">
      <span :class="data.class">
        <span v-if="data.icon" :class="data.icon"></span>
         <span v-if="data.label" v-text="data.label"></span>
        <!-- <node-content :node="data"></node-content> -->
      </span>
      <template v-if="'children' in data">
        <span v-if="data.children.length>0" class="uex-icon-caret-right"></span>
      </template>
    </div>
    <ul
      v-if="'children' in data"
      v-show="visible"
      :style="{top: pos.top, bottom: pos.bottom}">
      <context-menu-item
        v-for="(item,index) in data.children"
        :key="index"
        :data="item"
        @action="action">
      </context-menu-item>
    </ul>
  </li>
</template>
<script>
export default {
    name: 'ContextMenuItems',

    componentName: 'ContextMenuItems',

    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        tipShow: {
            type: Boolean,
            default: false
        }
    },

    components: {},

    data() {
        return {
            pos: {
                top: '0px',
                bottom: 'auto'
            },
            visible: false
        };
    },
    methods: {
        getElementPosition(el) {
            let x = 0;
            let y = 0;
            while (el != null) {
                x += el.offsetLeft;
                y += el.offsetTop;
                // eslint-disable-next-line no-param-reassign
                el = el.offsetParent;
            }
            return { x, y };
        },
        exec() {
            if (!this.data.disabled) {
                this.$emit('action', this.data);
            }
        },
        action(data) {
            if (!data.disabled) {
                this.$emit('action', data);
            }
        },
        changeStyle() {
            const self = this;
            if (self.$el.childNodes[1]) {
                if (typeof self.$el.childNodes[1].tagName === 'string') {
                    if (self.$el.childNodes[1].tagName.toLowerCase() === 'ul') {
                        const bodyClientHeight = document.body.clientHeight;
                        const bodyClientTop = document.body.clientTop;
                        const viewHeight = bodyClientHeight + bodyClientTop;
                        const clientTop = this.getElementPosition(self.$el.childNodes[1]).y;
                        const height = self.$el.childNodes[1].clientHeight;
                        const elBottom = height + clientTop;
                        if (viewHeight < elBottom) {
                            this.pos.top = 'auto';
                            this.pos.bottom = '0px';
                        } else {
                            this.pos.top = '0px';
                            this.pos.bottom = 'auto';
                        }
                    }
                }
            }
        },
        showChild() {
            this.visible = true;
        },
        hideChild() {
            this.visible = false;
            this.pos.top = '0px';
            this.pos.bottom = 'auto';
        }
    },
    watch: {
        visible(val) {
            if (val) {
                const self = this;
                this.$nextTick(() => {
                    self.changeStyle();
                });
            }
        }
    },
    created() {
    },
    mounted() {
        this.changeStyle();
    }
};
</script>

 

3.调用组件：

 

import ContextMenu from './content-menu/index';

// 我这里是表格调用
  @row-contextmenu="rowContextmenu1"，在表格中放入改事件，放在el-table上，下面是直接使用方法，及指令

<el-table :data="tableData" border style="width: 100%" @contextmenu.native="handleContextMenu" @row-contextmenu="rowContextmenu2" v-contextmenu="buttonActionData2" @contextmenu-action="buttonAction" > <el-table-column prop="stepInst" label="指令" show-overflow-tooltip></el-table-column> <el-table-column prop="stepType" label="所属区域" show-overflow-tooltip></el-table-column> </el-table>
//js
methods: { buttonAction: function(data) { console.log(data.action); }, rowContextmenu2: function(row, event) { this.rowContextmenu = true; this.activeRow = row; }, handleContextMenu: function() { if (this.rowContextmenu) { this.buttonActionData2 = this.activeRow.actions; } else { this.buttonActionData2 = []; } this.rowContextmenu = false } },
//data
tableData: [ { 'stepInst': 'authVerify', 'stepType': '输入区', 'actions': [ {'icon': 'uex-icon-edit', 'label': 'test1test1test1', 'action': 'aaaa'}, {'label': 'test2', 'action': 'bbbb'} ] }, { 'stepInst': 'authVerify', 'stepType': '输入区', 'actions': [ {'label': 'test1test1test1', 'action': 'aaaa'}, {'label': 'test2', 'action': 'bbbb'} ] }, { 'stepInst': 'paramCheck', 'stepType': '输入区', 'actions': [ {'label': 'test3', 'action': 'aaaa1'}, {'label': 'test4', 'action': 'bbbb1'} ] }, { 'stepInst': 'paramsConvert', 'stepType': '输入区', 'actions': [ { 'label': 'test1test1test1test1', 'action': 'action1' }, { 'label': 'test2test2test2', 'action': 'action2', 'children': [ { 'label': 'test21est21est21', 'action': 'action21', 'children': [ { 'label': 'test211test211test211', 'action': 'action211' }, { 'label': 'test212test212test212', 'action': 'action212' } ] }, { 'label': 'test22test22test22', 'action': 'action22' }, ] } ] } ], buttonActionData2: [], rowContextmenu: false
//上面是在table中添加组件来使用
//通过右键配置使用
<el-table :data="tableData" border style="width: 100%" @row-contextmenu="rowContextmenu1"> <el-table-column prop="stepInst" label="指令" show-overflow-tooltip></el-table-column> <el-table-column prop="stepType" label="所属区域" show-overflow-tooltip></el-table-column> </el-table> 
<ContextMenu @action="action" :tip-show="false" :data="actionData" :width="90" :visible="contentMenuShow" :x="pos.x" :y="pos.y"> </ContextMenu>

//data
tableData: [ { 'stepInst': 'authVerify', 'stepType': '输入区', 'actions': [ {'icon': 'uex-icon-edit', 'label': 'test1test1test1', 'action': 'aaaa'}, {'label': 'test2', 'action': 'bbbb'} ] }, { 'stepInst': 'authVerify', 'stepType': '输入区', 'actions': [ {'label': 'test1test1test1', 'action': 'aaaa'}, {'label': 'test2', 'action': 'bbbb'} ] }, { 'stepInst': 'paramCheck', 'stepType': '输入区', 'actions': [ {'label': 'test3', 'action': 'aaaa1'}, {'label': 'test4', 'action': 'bbbb1'} ] }, { 'stepInst': 'paramsConvert', 'stepType': '输入区', 'actions': [ { 'label': 'test1test1test1test1', 'action': 'action1' }, { 'label': 'test2test2test2', 'action': 'action2', 'children': [ { 'label': 'test21est21est21', 'action': 'action21', 'children': [ { 'label': 'test211test211test211', 'action': 'action211' }, { 'label': 'test212test212test212', 'action': 'action212' } ] }, { 'label': 'test22test22test22', 'action': 'action22' }, ] } ] } ], pos: { x: 0, y: 0 }, actionData: [{'label': 'test2', 'action': 'bbbb'}], contentMenuShow: false, buttonActionData1: [ { 'label': 'test1test1test1test1', 'action': 'action1' }, { 'label': 'test2test2test2', 'action': 'action2', 'children': [ { 'label': 'test21est21est21', 'action': 'action21', 'children': [ { 'label': 'test211test211test211', 'action': 'action211' }, { 'label': 'test212test212test212', 'action': 'action212' } ] }, { 'label': 'test22test22test22', 'action': 'action22' }, ] } ], buttonActionData2: [], buttonShow: true, rowContextmenu: false
//js
methods: { getEventPos: function(e) { var x = e.clientX; var y = e.clientY; return { 'x': x, 'y': y }; }, rowContextmenu1: function(row, event) { var e = event || window.event; var pos = this.getEventPos(e); if (e.which === 3) { this.contentMenuShow = false; this.pos.x = pos.x; this.pos.y = pos.y; this.actionData = row.actions; console.log(this.actionData); this.contentMenuShow = true; } this.preventDefault(e); e.returnValue = false; return false; }, preventDefault: function(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnvalue = false; } }, action: function(data) { alert(data.action); this.contentMenuShow = false; } }, created: function() { }, mounted: function() { var _self = this; this.$nextTick(function() { var el = document.body; var handleDisplay = function() { _self.contentMenuShow = false; } if (el.addEventListener) { el.addEventListener('click', handleDisplay); } else if (el.attachEvent) { el.attachEvent('onclick', handleDisplay); } });
// 组件--下面是直接使用方法，及指令
//data数据
 contextmenuData: [
                { label: '新增', action: 'add', icon: 'ri-add-line' },
                { label: '编辑', action: 'edit', icon: 'ri-edit-box-line', disabled: true },
                { label: '删除', action: 'delete', icon: 'ri-delete-bin-7-line' }
            ],

pos: {
                x: 0,
                y: 0
            },
rowContextmenu: false,
//html
<ContextMenu
                    @action="action"
                    :tip-show="false"
                    :data="contextmenuData"
                    :width="120"
                    :visible="rowContextmenu"
                    :x="pos.x"
                    :y="pos.y">
            </ContextMenu>
//js事件
  getEventPos(e) {
            const x = e.clientX;
            const y = e.clientY;
            return { x, y };
        },
        rowContextmenu1(row) {
            console.log('row', row);
            const contextmenuData = [
                { label: '新增', action: 'add', icon: 'ri-add-line' },
                { label: '编辑', action: 'edit', icon: 'ri-edit-box-line', disabled: true },
                { label: '删除', action: 'delete', icon: 'ri-delete-bin-7-line' }
            ];
            const e = window.event;
            const pos = this.getEventPos(e);
            if (e.which === 3) {
                this.rowContextmenu = false;
                this.pos.x = pos.x;
                this.pos.y = pos.y;
                this.contextmenuData = contextmenuData;
                this.rowContextmenu = true;
            }
            this.preventDefault(e);
            e.returnValue = false;
            return false;
        },
        preventDefault(el) {
            const e = el || window.event;
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnvalue = false;
            }
            return e;
        },
        action(data) {
            console.log('data.action', data.action);
            this.rowContextmenu = false;
        },

这只是我项目中一个简单的demo,有问题，私信我