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为全小写,然后就好了…
在这里插入图片描述

原文地址:https://www.cnblogs.com/volodya/p/14357490.html