Element-ui自定义input框非空校验

1、vue自定义非空指令：

main.js中自定义非空指令
当input框或下拉框中数据更新时，触发校验

Vue.directive('isEmpty',{
  update:function(el,binding,vnode){
    if(vnode.componentInstance.value==""){
      el.classList.add("is-required");
    }else if(vnode.componentInstance.value||vnode.componentInstance.value==0){
      el.classList.remove("is-required");
    }
  }
})

---

2、css 全局添加必填样式：

.is-required input{
  border-color:red!important
}

---

3、具体应用：

<el-select placeholder="请选择" v-isEmpty v-model="form.name"></el-select>

<el-input v-isEmpty v-model="form.age" />

---

4、寄语：

过去这一年，你最大的收获是什么呢？
不一定要“战绩赫赫”，
不一定要“大有所成”，
捞出属于你的“星星”即可！
拥有那些“不负生活”的闪亮时刻即可！