el-popconfirm事件不生效

el-popconfirmconfirm事件不生效原因研究el-popconfirm事件不生效问题归纳1.问题描述今天在写一个页面的时候、需要使用到该组件、参考官网的文档应该使用 @confirm 就可以，但是自己使用发现不生效。

文章插图
2.解决办法尝试了很多从网上找的方法、例如：使用 @onConfirm @onconfirm @confirm 等等、但是依旧不行、后来无意间看到一位网友说这个应该取源码看下、思路瞬间豁然开朗。

文章插图
【el-popconfirm事件不生效】点击该组件进入源码，具体内容如下

<template><el-popoverv-bind="$attrs"v-model="visible"trigger="click"><div class="el-popconfirm"><p class="el-popconfirm__main"><iv-if="!hideIcon":class="icon"class="el-popconfirm__icon":style="{color: iconColor}"></i>{{title}}</p><div class="el-popconfirm__action"><el-buttonsize="mini":type="cancelButtonType"@click="cancel">{{cancelButtonText}}</el-button><el-buttonsize="mini":type="confirmButtonType"@click="confirm">{{confirmButtonText}}</el-button></div></div><slot name="reference" slot="reference"></slot></el-popover></template><script>import ElPopover from 'element-ui/packages/popover';import ElButton from 'element-ui/packages/button';import {t} from 'element-ui/src/locale';export default {name: 'ElPopconfirm',props: {title: {type: String},confirmButtonText: {type: String,default: t('el.popconfirm.confirmButtonText')},cancelButtonText: {type: String,default: t('el.popconfirm.cancelButtonText')},confirmButtonType: {type: String,default: 'primary'},cancelButtonType: {type: String,default: 'text'},icon: {type: String,default: 'el-icon-question'},iconColor: {type: String,default: '#f90'},hideIcon: {type: Boolean,default: false}},components: {ElPopover,ElButton},data() {return {visible: false};},methods: {confirm() {this.visible = false;this.$emit('onConfirm');},cancel() {this.visible = false;this.$emit('onCancel');}}};</script>

我们发现该组件其实是通过监听具体的方法实现的，这样我们就可以修改自己的方法

文章插图
如上图所示、其监听这两个方法、但是要注意不同版本可能不一致。
最后、修改自己的方法即可成功实现

文章插图