记录Element Popconfirm 弹出确认框 事件踩坑

5,285 阅读1分钟
<template>
<el-popconfirm
  title="这是一段内容确定删除吗?"
>
  <el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>

这个是官网上的代码,在说明文档里并没有说明确定和取消按钮的事件,如果去网上查,得知源码里面事件名为

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

可是如果使用以上事件名,vue则会警告,并且不会触发事件

[Vue tip]: Event 'onconfirm' is emitted in component <ElPopconfirm> 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'.

建议在main.js中引入element组件库时,对该组件进行修改,这里就不放代码了