弹窗2:关于MessageBox 弹窗自动关闭的方法($msgbox);2、弹窗校验再次打开后,校验提示还在;3、校验的提示文字有了但是输入框没有变红色

一、elementUI中MessageBox 弹窗超时不操作后自动关闭的问题,但是官网找了半天,没有自动关闭的方法,最后找到了这个办法

this.$msgbox.close();

二、弹窗校验生效后,再次打开后,校验提示还在

弹窗2:关于MessageBox 弹窗自动关闭的方法($msgbox);2、弹窗校验再次打开后,校验提示还在;3、校验的提示文字有了但是输入框没有变红色_第1张图片

 
      
        

 1、在关闭弹框的地方:this.$refs.devicefromDialog.clearValidate();

2、this.$nextTick(()=>{
          this.$refs.devicefromDialog.clearValidate('airSwitchNo');//清除的校验规则prop传的值
          this.$refs['devicefromDialog'].resetFields();//清除表单内容
     })

如果报错的话可以去掉this.$nextTick方法加上下面的判断

if (typeof this.$refs.dataForm !== "undefined") {
  this.$refs["devicefromDialog"].resetFields();
  this.$refs.devicefromDialog.clearValidate('airSwitchNo');
}

 3、如果是vue3思路一样,方法如下

let deviceFrom = ref(null)//*需要定义与使用名称的一致
nextTick(()=>{//*需要等待DOM加载完毕以后再清空校验 否则会报错
  deviceFrom.value.clearValidate()
})

三、校验的提示文字有了,但是输入框没有变红色

弹窗2:关于MessageBox 弹窗自动关闭的方法($msgbox);2、弹窗校验再次打开后,校验提示还在;3、校验的提示文字有了但是输入框没有变红色_第2张图片 
是因为样式被覆盖了

第一种方法是在当前组件中添加样式(测试不生效,但是有的人生效了<原因不明>)

/deep/ .elec_box .el-form-item.is-error .el-input__inner{
  border-color: red;
}

第二种添加到公共样式中(注意给组件给当前组件的根元素添加一个样式,不然会影响其他组件)
弹窗2:关于MessageBox 弹窗自动关闭的方法($msgbox);2、弹窗校验再次打开后,校验提示还在;3、校验的提示文字有了但是输入框没有变红色_第3张图片

弹窗2:关于MessageBox 弹窗自动关闭的方法($msgbox);2、弹窗校验再次打开后,校验提示还在;3、校验的提示文字有了但是输入框没有变红色_第4张图片

弹窗2:关于MessageBox 弹窗自动关闭的方法($msgbox);2、弹窗校验再次打开后,校验提示还在;3、校验的提示文字有了但是输入框没有变红色_第5张图片

你可能感兴趣的:(vue,elementui,前端,javascript)