el-popconfirm 事件不生效

el-popconfirm 事件不生效問題歸納

1.問題描述

今天在寫一個頁面的時候、需要使用到該組件、參考官網的文檔應該使用 @confirm 就可以，但是自己使用發現不生效。

2.解決辦法

嘗試了很多從網上找的方法、例如： 使用 @onConfirm @onconfirm @confirm 等等、但是依舊不行、后來無意間看到一位網友說這個應該取源碼看下、思路瞬間豁然開朗。

點擊該組件進入源碼，具體內容如下

<template>
<el-popover
  v-bind="$attrs"
  v-model="visible"
  trigger="click"
>
<div class="el-popconfirm">
  <p class="el-popconfirm__main">
  <i
    v-if="!hideIcon"
    :class="icon"
    class="el-popconfirm__icon"
    :style="{color: iconColor}"
  ></i>
    {{title}}
  </p>
  <div class="el-popconfirm__action">
    <el-button 
      size="mini" 
      :type="cancelButtonType" 
      @click="cancel"
    >
      {{cancelButtonText}}
    </el-button>
    <el-button 
      size="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>

我們發現該組件其實是通過監聽具體的方法實現的，這樣我們就可以修改自己的方法

如上圖所示、其監聽這兩個方法、但是要注意不同版本可能不一致。

最后、修改自己的方法即可成功實現