1、问题
在vue项目中,使用element-ui中input组件的autofocus属性失效
2、原因
autofocus是vue中input的原生属性,element也支持这种方法,
但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。
3、解决办法
方法(1):
可在全局定义自动获得焦点的自定义指令,之后在所有单文件组件中都可使用v-focus使用该全局自定义指令,代码如下:
a、在main.js中定义全局指令:
Vue.directive('focus',{
inserted:function(el){
el.querySelector('input').focus()
}
})
注意:要使用el.querySelector(‘input’)取得input DOM元素
b、使用自定义指令:
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryParams.query" clearable @clear="getGoodsList" v-focus>
<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
</el-input>
</el-col>
方法(2):
a、使用ref="inputRef"在此单文件组件中引用input组件的原生DOM元素input,代码如下:
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryParams.query" clearable @clear="getGoodsList" ref="inputRef">
<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
</el-input>
</el-col>
b、再在此单文件组件在加载时,让文本框自动获得焦点
created() {
// 在input输入框被渲染完毕后再获取焦点
this.$nextTick(()=>{
// 使用引用的原生DOM对象input的focus方法自动获得焦点
this.$refs.inputRef.focus()
})
}
推荐使用方法(1):全局自定义组件,所有单文件组件都可使用,简单方便