記錄Element Popconfirm 彈出確認框 事件踩坑

無無無發表於2020-03-17
事件
<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'.
複製程式碼

這個時候只要去原始碼裡把事件名前面的on去掉就好了

methods: {
    confirm() {
      this.visible = false;
      this.$emit('confirm');
    },
    cancel() {
      this.visible = false;
      this.$emit('cancel');
    }
  }
複製程式碼

然後事件裡就這樣寫

<template>
<el-popconfirm
  title="這是一段內容確定刪除嗎？"
  @confirm="test"
>
  <el-button slot="reference">刪除</el-button>
</el-popconfirm>
</template>

複製程式碼

去試一下吧

相關文章