el-input获取焦点 input输入框为空时高亮 el-input值非法时

问题重述
前端主要框架为Vue.js,在页面使用组件库element-ui的el-input、el-select、el-autocomplete等元件时,想要在表单验证为空时,使空值的元件获取焦点高亮。效果如下图所示:el-input获取焦点 input输入框为空时高亮 el-input值非法时_第1张图片


解决思路
通过查看网上的相关问题和官方文档,发现在Vue中,可以通过$ref.ref属性名来访问DOM元素。又通过查看HTML的说明文档得知,通过focus()方法可以获取DOM的焦点。So,为了获取组件只需要在组件中添加ref属性,然后使用this.$refs.ref属性名.focus();即可实现获取某一特定DOM元素的焦点。
代码示例:


if(this.testModel === ''){
    this.$refs.test.focus();
}

你可能感兴趣的:(el-input获取焦点 input输入框为空时高亮 el-input值非法时)