This is the fifth day of my participation in the August Wen Challenge.More challenges in August

In the process of developing the project, I found some bugs in the Element component library, which wasted a lot of debugging time. I sorted out some encountered problems and sent them out, so as to avoid the same old path as me and improve the development efficiency of everyone

1. The Element Popconfirm bubble confirmation event cannot be implemented

1. Use case of official website:

<template> < el-popConfirm confirmButtonText=' yes' cancelButtonText=' no 'icon="el-icon-info" iconColor="red" Title =" Is this a paragraph of content to delete?" > <el-button slot="reference"> Delete </el-button> </el-popconfirm> </template>Copy the code

2. Effect of use cases:

3. Use this confirm window, it is necessary to implement the popover interactive events, as shown in the “confirm” and “cancel”, otherwise this control is useless, the official API does not specify the use of events, I checked, and then looked at the source code:

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:! Function (){this.visible=! 1,this.$emit("onConfirm")}, cancel:function(){this.visible=! 1,this.$emit("onCancel")} } }Copy the code

4. Just call onConfirm and onCancel *** :

<el-popconfirm cancelButtonText=" confirmButtonText=" confirmButtonText=" icon="el-icon-info" iconColor="red" title=" Data will not be recovered after deletion, Are you sure you want to delete it?" @onconfirm ="delData" @onconfirm ="cancelData" > <el-button type="danger" size="mini" slot="reference"> </el-popconfirm>Copy the code

2. Invalid click on el-popover in slot of el-table

1. Use case of official website:

<el-popover placement="top" width="160" V-model ="visible"> <p> </p> <div style="text-align: right; margin: </el-button> <el-button type="primary" size="mini" size="mini" type="text" @click="visible = false"> @click="visible = false"> Confirm </el-button> </div> <el-button slot="reference"> delete </el-button> </el-popover> <script> export default { data() { return { visible: false, }; } } </script>Copy the code

2. Effect of use cases:

3. During the development of the project, I found the problem was that I operated the operation button in the slot column of the table component, and added, deleted, changed, and searched. These basic functions needed to be confirmed by the user twice before they could be correctly operated.

Behind the study found that v – module browser did not identify the binding values, may be a version of the question, behind I switch to the value binding this variable, found the effect is, but close the window cannot be achieved, the official case this binding value roughly interpreted as the effect of prompt window shows the function, but still failed to meet…

4. Final solution

There are two solutions in my own project,

  • One is to write a single click event on the original official use case, that is, the popover cannot be closed automatically, so you need to click on another blank area to close it. Otherwise, you can dynamically control the popover style setting display: None.
  • The other option is to use a bubble confirmation box, but the Element Popconfirm bubble confirmation box event above does not work