在 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为全小写，然后就好了…