这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

在开发项目的过程中发现了一些Element组件库的一些bug问题，浪费了很多调试时间，整理了一些遇到的，发出来，避免大家再走我同样的老路，也提升大家的开发效率

1.Element Popconfirm气泡确认框 事件无法实现问题

1.官方网站的用例：

<template>
    <el-popconfirm
      confirmButtonText='好的'
      cancelButtonText='不用了'
      icon="el-icon-info"
      iconColor="red"
      title="这是一段内容确定删除吗？"
    >
      <el-button slot="reference">删除</el-button>
    </el-popconfirm>
</template>

2.用例效果：

3.用到这个确定窗，就一定需要去实现弹窗交互的事件，如图中的"确定"和"取消"，否则这个控件就毫无用处，官方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")}
		}
	}

4.只要去调用onConfirm和onCancel即可实现***：

 <el-popconfirm 
     cancelButtonText="取消"
     confirmButtonText="确定"
     icon="el-icon-info"
     iconColor="red"
     title="删除后数据将无法恢复，确定要删除吗？"
     @onConfirm="delData"
     @onCancel="cancelData"
    >
    <el-button type="danger" size="mini" slot="reference">删除</el-button>
 </el-popconfirm>

2.el-table中插槽里面 el-popover点击无效问题：

1.官方网站的用例：

<el-popover placement="top" width="160" v-model="visible">
  <p>这是一段内容这是一段内容确定删除吗？</p> 
  <div style="text-align: right; margin: 0"> 
  <el-button size="mini" type="text" @click="visible = false">取消</el-button> 
  <el-button type="primary" size="mini" @click="visible = false">确定</el-button> 
  </div>
  <el-button slot="reference">删除</el-button> 
</el-popover> 

<script> 
export default { 
    data() { 
         return { 
           visible: false, 
         }; 
    } 
}
</script>

2.用例效果：

3.项目开发发现问题是在表格组件当中操作插槽栏的操作按钮，增删改查，这些基础功能，需要做到用户操作的二次确认，才能正确操作，然后当我插槽里粘贴了element官方的用例的时候，点击发现没有反应，

后面研究发现v-module这个绑定值浏览器未识别，可能是版本问题吧，后面我切换成value绑定这个变量，发现效果是有了，但是关闭窗口就无法实现了，官方用例这个绑定值的效果大致理解为提示窗口的显示隐藏功能，但是还是未能实现........

4.最终解决方案

我自己的项目当中有两种解决方案，

• 一种是在原本官方用例上单独写点击事件，就是弹窗无法自动关闭，需要点击其他空白区域关闭，实在不行就动态控制弹窗的样式设置display：none。
• 另外一种就是改用气泡确认框，但是有上面Element Popconfirm气泡确认框 事件无法实现的问题