Vue3+Element Plus+ts,el-input自动聚焦
时间: 2024-10-20 16:09:30 浏览: 30
在Vue3配合Element Plus以及TypeScript的项目中,要实现`<el-input>`元素的自动聚焦功能,你可以这样做:
首先,在你的组件文件中,引入`ref`和`useEffect`来自Vue的Composition API,以及Element Plus的Input组件。例如:
```typescript
import { ref, useEffect } from 'vue';
import { ElInput } from 'element-plus';
export default {
setup() {
const inputRef = ref<HTMLInputElement>(null); // 定义input元素的引用
// 当组件挂载完成时,自动聚焦input
useEffect(() => {
if (inputRef.value) {
inputRef.value.focus(); // 调用input的focus方法
}
}, [inputRef]);
return {
inputEl: inputRef,
};
},
}
```
然后在模板部分,使用`ref`:
```html
<template>
<div>
<el-input v-model="value" :ref="inputEl"></el-input> <!-- 将ref绑定到el-input上 -->
</div>
</template>
```
当你的组件实例化并渲染后,`inputEl.focus()`会在组件挂载完成后立即使`el-input`获得焦点。
阅读全文