Element Popconfirm氣泡確認框 事件無法實現問題

   在 Element的最新版本(20年5月更新版本)中，添加了新控件：Popconfirm 氣泡確認框，感覺使用與操作交互很方便和人性化，就毅然決然地選擇使用了，然后問題就不出意外地來了…先看官方展示圖：

    這個頁面很容易實現，官方API也給了自定義樣式的范例，也很好：

<template> <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="el-icon-info" iconColor="red" title="這是一段內容確定刪除嗎？" > <el-button slot="reference">刪除</el-button> </el-popconfirm> </template>

    那么既然用到這個確定窗，就一定需要去實現彈窗交互的事件，如圖中的"確定"和"取消"，否則這個控件就毫無用處，官方API沒有說明事件使用方法，自己查了下，然后又看了源代碼：

var Od=r({ name:"ElPopconfirm", props:{ title:{type:String}, confirmButtonText: {type:String,default:W("el.popconfirm.confirmButtonText")}, cancelButtonText: {type:String,default:W("el.popconfirm.cancelButtonText")}, confirmButtonType: {type:String,default:"primary"}, cancelButtonType: {type:String,default:"text"}, icon:{type:String,default:"el-icon-question"}, iconColor:{type:String,default:"#f90"}, hideIcon:{type:Boolean,default:!1}}, components:{ElPopover:Zs,ElButton:Et}, data:function(){return{visible:!1}}, methods:{ //方法 confirm:function(){this.visible=!1,this.$emit("onConfirm")}, cancel:function(){this.visible=!1,this.$emit("onCancel")} } }

    只要去調用onConfirm和onCancel即可實現：

 <el-popconfirm cancelButtonText="取消" confirmButtonText="確定" icon="el-icon-info" iconColor="red" title="刪除后數據將無法恢復，確定要刪除嗎？" @onConfirm="delData" @onConfirm="cancelData" > <el-button type="danger" size="mini" slot="reference">刪除</el-button> </el-popconfirm>

    這樣寫了后，並沒有實現，提示我命名不正確，但我確實用與Element相同的事件名，為啥就是不行？

    因為在Vue HTML中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。所以onConfirm這個命名在瀏覽器編譯后就是onconfirm，這樣就出現了上面的Bug。那么我就改了Element源代碼中的onConfirm和onCancel為全小寫，然后就好了…