vue设置element-UI全局表单验证闪烁效果

效果：

js部分：

//放在app.vue的<script></script>标签里面
let tiaaa=null
let tibbb=null
let time=800//闪烁频率(毫秒)[注：和样式transition过渡设置相同时间（过渡单位：秒）]
function aaaaa(){
  tiaaa=setTimeout(() => {
    let aaa=document.getElementsByClassName('is-error')
    if(aaa.length==0){
      aaa=[]
    }
    aaa=[].slice.call(aaa)
    aaa.forEach((i,n) => {
      aaa[n].classList.add('errooor')//添加验证不通过类名
      aaa[n].classList.remove('successss')//移除验证通过类名
    });
    bbbbb()
    clearTimeout(tiaaa)
  }, time);//闪烁频率
}
function bbbbb(){
  tibbb=setTimeout(() => {
    let aaa=document.getElementsByClassName('is-error')
    if(aaa.length==0){
      aaa=[]
    }
    aaa=[].slice.call(aaa)
    aaa.forEach((i,n) => {
      aaa[n].classList.remove('errooor')//移除验证不通过类名
      aaa[n].classList.add('successss')//添加验证通过类名
    });
    aaaaa()
    clearTimeout(tibbb)
  }, time);//闪烁频率
}
aaaaa()//启动

css部分：

//放在app.vue全局样式
.errooor { //表单验证失败类名
  .el-textarea__inner { //单选框
    background-color: #ffd3d3 !important;
    transition: all 0.8s;
  }

  .el-input__inner { //单选框
    background-color: #ffd3d3 !important;
    transition: all 0.8s;
  }

  .el-range-input { //时间选择器
    background-color: #f5949400 !important;
  }

  .el-radio__inner { //单选框
    background-color: #ffd3d3 !important;
    transition: all 0.8s;
  }
}

.successss { //表单验证成功类名
  .el-textarea__inner { //单选框
    background-color: #fff !important;
    transition: all 0.8s;
  }

  .el-input__inner { //单选框
    background-color: #fff !important;
    transition: all 0.8s;
  }

  .el-range-input { //时间选择器
    background-color: #f5949400 !important;
  }

  .el-radio__inner { //单选框
    background-color: #fff !important;
    transition: all 0.8s;
  }
}