Element: [bug report] popconfirm component event naming is not standard

[vajacn]

Element UI version

2.13.0

OS/Browsers version

Windows 10 / Chrome 79

Vue version

2.6.10

Reproduction Link

https://codepen.io/vajacn/pen/PowbQLV

Steps to reproduce

在 el-popconfirm 组件上写 @onConfirm="action"，不会调用 action 方法，把 onConfirm 改成 onconfirm 也是一样的效果。

组件在声明事件时应该用 kebab-case 命名，例如：on-confirm。（我觉得不要用 on 前缀），而且这个方法在文档里没写，看源码时才发现，建议在文档中补充完整。

What is Expected?

执行 action 方法，在控制台打印 deleted

What is actually happening?

控制台 Vue 提示如下：
"[Vue tip]: Event 'onconfirm' is emitted in component at packages/popconfirm/src/main.vue but the handler is registered for 'onConfirm'. Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use 'on-confirm' instead of 'onConfirm'."

[element-bot]

Translation of this issue:

Element UI version

2.13.0

OS/Browsers version

Windows 10 / Chrome 79

Vue version

2.6.10

Reproduction Link

https://codepen.io/vajacn/pen/PowbQLV

Steps to reproduce

Writing @ onconfirm = "action" on the El popconfirm component will not call the action method. Changing onconfirm to onconfirm will have the same effect.

Components should be named kebab case when declaring events, for example: on confirm. (I don't think you should use the on prefix) and this method is not written in the document. Only when you look at the source code can you find that it's recommended to complete it in the document.

What is Expected?

Execute the action method and print the deleted in the console

What is actually happening?

The console Vue prompts are as follows:
"[Vue tip]: Event 'onconfirm' is emitted in component at packages/popconfirm/src/main.vue but the handler is registered for 'onConfirm'. Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use 'on-confirm' instead of 'onConfirm'."

[xrkffgg]

API 上没有写支持 onConfirm 啊

[vajacn]

是啊，文档上没写。我是看源码里发现有这个事件的。

  methods: {
    confirm() {
      this.visible = false;
      this.$emit('onConfirm');
    },
    cancel() {
      this.visible = false;
      this.$emit('onCancel');
    }
  }

如果不用onConfirm这个事件，那如何在点击「确定」按钮时执行需要的操作呢？

[xrkffgg]

@onConfirm="doSome"

我在本地测试 这个可以的

[xrkffgg]

新出的，没用过，才发现文档里竟然没有这一块 😂😂

[xrkffgg]

codepen 上会报错，本地测试不会

[vajacn]

是的，我在本地测试也能用。不过 Element UI 里其他的事件都是用 kebab-case 格式命名，这也是 Vue.js 的最佳实践，应该保持统一。
总的来说，两点建议：
1、事件名称命名方式保持一致
2、文档上补充事件说明

[parse-dinghua]

用cdn模式，一样的错误，popconfirm 基本没有用

[cmpan]

popconfirm 没有起到应有的作用，弹出的按钮没法绑定事件

[Hao-Wu]

2.13.0
@onConfirm="doSome" 确实是work的
上面示例codepen使用了cdn确实是不work的
文档里竟然没有明确的说明onConfirm，确实是很不应该的

[Hao-Wu]

Fixed in #18324

[Edge00]

用 JSX 写的时候必须写 onOnConfirm 🤣🤣🤣：

<el-popconfirm onOnConfirm={handleConfirm} title="确定删除？">
</el-popconfirm>

[FEMotong]

:apple:监听事件要写小驼峰onConfirm！

[Innei]

建议在文档中补充这两个事件，
https://element.eleme.io/#/zh-CN/component/popconfirm

[khmyznikov]

Still doesn't work? Just change to:

this.$emit('on-confirm');
this.$emit('on-cancel');

[choyri]

截至当前最新版本 2.13.2，依然还有 如上 提到的情况：

用cdn模式，一样的错误，popconfirm 基本没有用

[ramwin]

还有这个情况。 因为里面emit用的是onConfirm
代码链接

[iamkun]

Now fixed to the correct 'confirm' and 'cancel' event name in #20240