问题重述
前端主要框架为Vue.js,在页面使用组件库element-ui的el-input、el-select、el-autocomplete等元件时,想要在表单验证为空时,使空值的元件获取焦点高亮。效果如下图所示:
解决思路
通过查看网上的相关问题和官方文档,发现在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();
}
所有评论(0)