在项目开发过程中,本地 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 版本有非兼容性更新,文档如图
源码如下
<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 库版本一致,之后更新
关联问题, 有兴趣可以拓展一下:
el-button绑定v-if导致
- 源代码事件名与文档所描述事件名不一致