小言_互联网的博客

element ui popconfirm @onConfirm确认事件不起作用 踩坑记

476人阅读  评论(0)

使用element ui 的el-popconfirm控件绑定确认事件,vue提示警告,事件不执行

Vue HTML中的特性名大小写不敏感,浏览器把大写字符解释为小写字符,于是onConfirm被解释为onconfirm,无法对应导致上面的bug

        <el-tooltip class="item" effect="dark" content="保存当前区域设置" placement="top-start">

            <el-popconfirm @onConfirm="onSetArea"
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-question"
              icon-color="#f90"
              title="保存当前区域设置确定吗?"
            >
              <el-button slot="reference" type="primary" icon="el-icon-location">设定</el-button>
            </el-popconfirm>
        </el-tooltip>

解决办法–修改vue引用源文件
element-ui 的 index.js 文件 替换一处onConfirm为onconfirm(小写),搞定
(查找 onConfirm 在文件的最后面)

methods:{
   
confirm:function(){
   this.visible=!1,this.$emit("onConfirm")},
cancel:function(){
   this.visible=!1,this.$emit("onCancel")}
}
methods:{
   
confirm:function(){
   this.visible=!1,this.$emit("onconfirm")},
cancel:function(){
   this.visible=!1,this.$emit("oncancel")}
}

转载:https://blog.csdn.net/weixin_44300619/article/details/109773430
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场