el-popover弹出框增加右键点击事件
源文件中找到目录element-dev =>packages =>popover=>src => main.vue，增加contextmenu事件，代码如下，修改完成后打包 npm run dist，找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包，用你修改好后打包生成的 lib 包进行替换即可生效。
另外需要对浏览器自带的右键点击事件进行屏蔽，在页面元素上增加@contextmenu="doNothing"事件，doNothing方法如下
doNothing(){window.event.returnValue=false;return false}
不会修改源码的可查看/xuanyuyao/article/details/127995697?spm=1001..3001.5501
修改源码代码如下：
<el-popoverplacement="right"title="标题"width="200"trigger="contextmenu"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-button slot="reference">hover 激活</el-button></el-popover>
<template><span><transition :name="transition" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave"><div class="el-popover el-popper" :class="[popperClass, content && 'el-popover--plain']" ref="popper" v-show="!disabled && showPopper" :style="{ width: width + 'px' }" role="tooltip" :id="tooltipId" :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"><div class="el-popover__title" v-if="title" v-text="title"></div><slot>{{content }}</slot></div></transition><span class="el-popover__reference-wrapper" ref="wrapper"><slot name="reference"></slot></span></span></template><script>import Popper from 'element-ui/src/utils/vue-popper';import {on, off } from 'element-ui/src/utils/dom';import {addClass, removeClass } from 'element-ui/src/utils/dom';import {generateId } from 'element-ui/src/utils/util';export default {name: 'ElPopover',mixins: [Popper],props: {trigger: {type: String,default: 'click',validator: value => ['click', 'focus', 'hover', 'manual', 'contextmenu'].indexOf(value) > -1},openDelay: {type: Number,default: 0},closeDelay: {type: Number,default: 200},title: String,disabled: Boolean,content: String,reference: {},popperClass: String,width: {},visibleArrow: {default: true},arrowOffset: {type: Number,default: 0},transition: {type: String,default: 'fade-in-linear'},tabindex: {type: Number,default: 0}},computed: {tooltipId() {return `el-popover-${generateId()}`;}},watch: {showPopper(val) {if (this.disabled) {return;}val ? this.$emit('show') : this.$emit('hide');}},mounted() {let reference = this.referenceElm = this.reference || this.$refs.reference;const popper = this.popper || this.$refs.popper;if (!reference && this.$refs.wrapper.children) {reference = this.referenceElm = this.$refs.wrapper.children[0];}// 可访问性if (reference) {addClass(reference, 'el-popover__reference');reference.setAttribute('aria-describedby', this.tooltipId);reference.setAttribute('tabindex', this.tabindex); // tab序列popper.setAttribute('tabindex', 0);if (this.trigger !== 'click' && this.trigger !== 'contextmenu') {on(reference, 'focusin', () => {this.handleFocus();const instance = reference.__vue__;if (instance && typeof instance.focus === 'function') {instance.focus();}});on(popper, 'focusin', this.handleFocus);on(reference, 'focusout', this.handleBlur);on(popper, 'focusout', this.handleBlur);}on(reference, 'keydown', this.handleKeydown);on(reference, 'click', this.handleClick);}if (this.trigger === 'click') {on(reference, 'click', this.doToggle);on(document, 'click', this.handleDocumentClick);} else if (this.trigger === 'hover') {on(reference, 'mouseenter', this.handleMouseEnter);on(popper, 'mouseenter', this.handleMouseEnter);on(reference, 'mouseleave', this.handleMouseLeave);on(popper, 'mouseleave', this.handleMouseLeave);} else if (this.trigger === 'focus') {if (this.tabindex < 0) {console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');}if (reference.querySelector('input, textarea')) {on(reference, 'focusin', this.doShow);on(reference, 'focusout', this.doClose);} else {on(reference, 'mousedown', this.doShow);on(reference, 'mouseup', this.doClose);}} else if (this.trigger === 'contextmenu') {on(reference, 'contextmenu', this.doToggle);on(document, 'contextmenu', this.handleDocumentClick);on(document, 'click', this.doClose);}},beforeDestroy() {this.cleanup();},deactivated() {this.cleanup();},methods: {doToggle() {this.showPopper = !this.showPopper;},doShow() {this.showPopper = true;},doClose() {this.showPopper = false;},handleFocus() {addClass(this.referenceElm, 'focusing');if (this.trigger === 'click' || this.trigger === 'focus' ) this.showPopper = true;},handleClick() {removeClass(this.referenceElm, 'focusing');},handleBlur() {removeClass(this.referenceElm, 'focusing');if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;},handleMouseEnter() {clearTimeout(this._timer);if (this.openDelay) {this._timer = setTimeout(() => {this.showPopper = true;}, this.openDelay);} else {this.showPopper = true;}},handleKeydown(ev) {if (ev.keyCode === 27 && this.trigger !== 'manual') {// escthis.doClose();}},handleMouseLeave() {clearTimeout(this._timer);if (this.closeDelay) {this._timer = setTimeout(() => {this.showPopper = false;}, this.closeDelay);} else {this.showPopper = false;}},handleDocumentClick(e) {let reference = this.reference || this.$refs.reference;const popper = this.popper || this.$refs.popper;if (!reference && this.$refs.wrapper.children) {reference = this.referenceElm = this.$refs.wrapper.children[0];}if (!this.$el ||!reference ||this.$el.contains(e.target) ||reference.contains(e.target) ||!popper ||popper.contains(e.target)) return;this.showPopper = false;},handleAfterEnter() {this.$emit('after-enter');},handleAfterLeave() {this.$emit('after-leave');this.doDestroy();},cleanup() {if (this.openDelay || this.closeDelay) {clearTimeout(this._timer);}}},destroyed() {const reference = this.reference;off(reference, 'click', this.doToggle);off(reference, 'mouseup', this.doClose);off(reference, 'mousedown', this.doShow);off(reference, 'focusin', this.doShow);off(reference, 'focusout', this.doClose);off(reference, 'mousedown', this.doShow);off(reference, 'mouseup', this.doClose);off(reference, 'mouseleave', this.handleMouseLeave);off(reference, 'mouseenter', this.handleMouseEnter);off(document, 'click', this.handleDocumentClick);off(document, 'contextmenu', this.handleDocumentClick);off(reference, 'contextmenu', this.doToggle);off(document, 'click', this.doClose);}};</script>
