el-popconfirm 确认/取消 confirm cancel 事件未触发

2,385 阅读1分钟

在项目开发过程中,本地 onConfirm 事件正常触发,但发布到测试环境点击无反应,代码如下

<el-popconfirm
  confirmButtonText="OK"
  cancelButtonText="No, Thanks"
  icon="el-icon-info"
  iconColor="red"
  placement="bottom"
  title="Are you sure to delete this?"
  @onConfirm="onDeleteHandle(data)"
>
  <el-button
    type="text"
    size="medium"
    slot="reference"
    @click.stop
  >
    <i class="el-icon-delete"></i>
  </el-button>
</el-popconfirm>

通过排查,element 在 2.14.0 版本有非兼容性更新,文档如图

image.png 源码如下

<template>
  <el-popover
    v-bind="$attrs"
    v-model="visible"
    trigger="click"
  >
  <div class="el-popconfirm">
    ...... // 省略
    <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>

// v2.13.2
<script>
...... // 省略
export default {
  methods: {
    confirm() {
      this.visible = false;
      this.$emit('onConfirm');
    },
    cancel() {
      this.visible = false;
      this.$emit('onCancel');
    }
  }
};
</script>

// v2.14.0
<script>
export default {
  methods: {
    confirm() {
      this.visible = false;
      this.$emit('confirm');
    },
    cancel() {
      this.visible = false;
      this.$emit('cancel');
    }
  }
};
</script>

故修改为以下代码即可

@confirm="onDeleteHandle(data)"

而我的问题是本地 @onConfirm 生效,线上 @confirm 生效

经排查,发现应该是本地与线上环境 element 库版本不一致问题,暂时解决方案是同时添加两行代码

@onConfirm="onDeleteHandle(data)"
@confirm="onDeleteHandle(data)"

但解决方案治标不治本,根本解决方案应该是保持 element 库版本一致,之后更新

关联问题, 有兴趣可以拓展一下:

  1. el-button 绑定 v-if 导致

github.com/ElemeFE/ele…

  1. 源代码事件名与文档所描述事件名不一致

github.com/ElemeFE/ele…