详解Vue3.0中ElementPlus<input输入框自动获取焦点>
更新时间：2023年04月04日 10:23:43 作者：棕耳兔Valeria
这篇文章主要给大家介绍了关于Vue3.0中ElementPlus<input输入框自动获取焦点>的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3.0具有一定的参考学习价值,需要的朋友可以参考下
前言
记录一下自己最近开发vue3.0的小小问题~~
最近在做项目时，dialog弹框事件需定位input焦点，方便用户可直接输入。原理其实很简单，Element已经提供了focus方法，但是文档中并没有写明怎么调用。
一、input-focus事件？
官方文档介绍：
正确使用方式：在el-input标签上加入ref属性，然后在需要的地方直接调用方法即可；
二、使用步骤
1.给input 设置ref 属性
代码如下（示例）：
<el-input ref="refInput" clearable maxlength="100" placeholder="请输入审批意见" style="width: auto" type="textarea" v-model="state.bz"></el-input>
2.引入ref和nextTick
代码如下（示例）：
import { ref,nextTick } from 'vue';
const refInput =ref()
3.在dialog打开事件中触发
代码如下（示例）：
const onOpenSp = (row) => {
state.dialogFormVisiblse = true;
nextTick(()=>{
console.log("进入")
refInput.value.focus()
})
};
总结
到此这篇关于详解Vue3.0中ElementPlus<input输入框自动获取焦点>的文章就介绍到这了,更多相关Vue3.0 input输入框自动获取焦点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了MVVM 框架解析之双向绑定,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了如何开发Vite3插件构建Electron开发环境,文中给大家提到了如何让 Vite 加载 Electron 的内置模块和 Node.js 的内置模块，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中多个倒计时实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了Vue中props报错问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了9102年webpack4搭建vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
Vue解决element-ui消息提示$message重叠问题
这篇文章主要为大家介绍了Vue解决element-ui消息提示$message重叠问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了从0到1构建vueSSR项目之路由的构建，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了Vue3初始化如何调用函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章给大家详细的整理了Vue中实现路由跳转的三种方式,使用vue-router,声明式-router-link,编程式这三种方法,分别有详细的代码示例,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论