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

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

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

<el-input
    ref="test"
    v-model.trim="testModel">
</el-input>
if(this.testModel === ''){
    this.$refs.test.focus();
}
    原文作者:princekin
    原文地址: https://segmentfault.com/a/1190000015196136
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞