el-popover弹出框增加右键点击事件

轩宇瑶

已于 2022-11-23 11:23:56 修改

阅读量2.4k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-23 11:10:33 首次发布

本文链接：https://blog.csdn.net/xuanyuyao/article/details/127996439

版权

本文介绍了如何在Vue.js项目中为el-popover弹出框添加右键点击事件。首先需要修改`element-dev/packages/popover/src/main.vue`文件，添加`contextmenu`事件，然后通过`npm run dist`打包，并替换项目中`node_modules/element-ui/lib`的相应文件。同时，为了阻止浏览器默认的右键菜单，需在页面元素上监听`@contextmenu="doNothing"`事件，其中`doNothing`方法用于防止默认行为。

摘要由CSDN通过智能技术生成

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
}

不会修改源码的可查看https://blog.csdn.net/xuanyuyao/article/details/127995697?spm=1001.2014.3001.5501
修改源码代码如下：

  <el-popover
    placement="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