Vue3.0ElementPlus<input输入框自动获取焦点>

news2024/11/17 5:39:47

文章目录

  • 前言
  • 一、input-focus事件?
  • 二、使用步骤
    • 1.给input 设置ref 属性
    • 2.引入ref和nextTick
    • 3.在dialog打开事件中触发


前言

记录一下自己最近开发vue3.0的小小问题~~
最近在做项目时,dialog弹框事件需定位input焦点,方便用户可直接输入。原理其实很简单,Element已经提供了focus方法,但是文档中并没有写明怎么调用。


一、input-focus事件?

官方文档介绍:
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
正确使用方式:在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()
			})
		};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/410326.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【vue3】组合式API之setup()介绍与reactive()函数的使用

>&#x1f609;博主&#xff1a;初映CY的前说(前端领域) ,&#x1f4d2;本文核心&#xff1a;setup()概念、 reactive()的使用 【前言】vue3作为vue2的升级版&#xff0c;有着很多的新特性&#xff0c;其中就包括了组合式API&#xff0c;也就是是 Composition API。学习组合…

vue + gojs 实现拖拽 流程图

一、流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件&#xff0c;也是一个难点&#xff0c;要说为什么是难点&#xff0c;首先&#xff0c;它是依赖画布canvas知识开发。其次&#xff0c;要依赖于内部API开发需求&#xff0c;开发项目需求的时候就要花…

js逆向爬取某音乐网站某歌手的歌曲

js逆向爬取某音乐网站某歌手的歌曲一、分析网站1、案例介绍2、寻找列表页Ajax入口&#xff08;1&#xff09;页面展示图。&#xff08;2&#xff09;寻找部分歌曲信息Ajax的token。&#xff08;3&#xff09;寻找歌曲链接&#xff08;4&#xff09;获取歌曲名称和id信息3、寻找…

vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用

vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用安装相关依赖安装 vue-plugin-hiprintJQuery安装 打印客户端引入依赖打印 html 内容 - 简单使用根据模版打印 - 简单使用以下内容 和上面demo 没关系 &#xff01;&#xff01;&#xff01;&…

使用videjs+vue2+elementui自定义播放器控件

一、安装项目所需依赖 videojs依赖&#xff1a; npm install --save-dev video.js elementui依赖&#xff08;这个图方便就不按需引入了&#xff09;&#xff1a; npm i element-ui -S 二、main.js修改 增加以下几行&#xff1a; import videojs from video.js import e…

成功解决:下载的谷歌浏览器,打开却是“2345浏览器”,方法亲测有效

今天打开谷歌浏览器使用&#xff0c;浏览器界面显示的2345浏览器&#xff0c;难道谷歌把2345收购了&#xff1f;应该不能&#xff0c;上网查找问题原因才发现&#xff0c;原来的谷歌首页是被劫持了。&#xff08;如果迫切解决问题&#xff0c;直接拉到底找方法&#xff09; 试了…

前端必备的谷歌浏览器JSON可视化插件:JSON-Handle

功能简介: 日常开发过程中,对接后台返回的数据接口时,数据格式常常是各种json格式字符串,在netWork里面查看十分不便,需要在网上找一个json格式化的工具再查看,然后再取数据字段,然后绑定到页面上,十分不便,推荐这么一款前端开发的浏览器插件工具给大家使用。 返回数…

【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;React专栏 上篇文章初步学习了Hooks的基础知识 今天来深入学习Hooks的一些扩展知识 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录useState -回调函数的参数使用场景语法语法规…

el-switch

目录 在element ui中el-switch开关组件具有先改变开关值再传值的特点。&#xff08;先改后传&#xff09; 1、触发change事件时 2、绑定disabled属性写三元表达式时 3、解决办法 在element ui中el-switch开关组件具有先改变开关值再传值的特点。&#xff08;先改后传&#xf…

cron表达式 详解

corn表达式是&#xff1a;由若干数字、空格、符号按一定的规则&#xff0c;组成的一组字符串&#xff0c;从而表达时间的信息。 好像和正则表达式有点类似哈&#xff0c;都是一个字符串表示一些信息。Cron 表达式生成器&#xff1a; https://www.smart-tools.cn/cron简介Cron 表…

基于Java+MySQL 实现(Web)日程管理系统【100010222】

基于Java的日程管理系统开发 摘要 日程管理在日常生活中是十分普通的一件事情&#xff0c;人们无论在生活中还是工作中都会有大大小小、各种各样的事情安排&#xff0c;如果仅仅靠纸张或者自己记录这些事情&#xff0c;往往会遗忘。针对这样的痛点&#xff0c;本文提供了日程…

HTML小图标的使用(无需下载图标源码)

我们在浏览一个网页中&#xff0c;会遇到很多有趣的小图标&#xff0c;这些小图标与访问者形成了友好的互动&#xff0c;所以我们在开发中都会适当插入一些生动有趣的图标来吸引访问者。插入图标的网站有很多&#xff0c;我这里以阿里巴巴图标库&#xff08;iconfont-阿里巴巴矢…

Div标签里放img和span标签实现垂直水平居中

正常默认布局 代码实现&#xff1a; <div style"width: 400px; height:400px; background-color:blueviolet"><img style"width: 80px; height: 80px;" src"./picture.png"><span style"color:white;">我是span标…

Vue3 使用MD5加密(清晰明了)

概述 最近在想做个cloud项目,gitee上找了个模板项目&#xff0c;前端使用到vue3 typeScript、Element Plus、Vue Router、Pinia、Axios、i18n、Vite等技术&#xff0c;最近使用到vue3 MD5加密&#xff0c;顺便学习一下&#xff0c;在此总结一下&#xff0c;若有不足之处&…

《EDA前端软件开发工程师面试指南》

2023届EDA领域校招总结&#xff0c;完结撒花&#xff01;&#xff01;&#xff01; 目录 前言 一、EDA公司介绍 二、项目面试 1.自我介绍 2.项目深入 3.专业经验 4.成果和技能 5.对面试官有什么问题 三、C面试 1、高频考点 2、其他知识点 3、算法题 四、逻辑综合面…

【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能

bilibili在线视频演示地址: 【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta…

前端已死?后端已亡?弯弯绕绕,几分真几分假

前段时间&#xff0c;我在掘金分享了一篇GPT-4 性能文章&#xff0c;也许是过于强大带来的威胁性&#xff0c;引来评论区的排队哀嚎&#xff08;如下图&#xff09;&#xff0c;所以“前端已死&#xff0c;后端已亡”这个概念真的成立吗&#xff1f;本文着重探讨前端。 前端和后…

Seurat | 强烈建议收藏的单细胞分析标准流程(基础质控与过滤)(一)

1. 写在前面 作为现在最火的scRNAseq分析包&#xff0c;Seurat当之无愧。&#x1f618; 本期开始我们介绍一下Seurat包的用法&#xff0c;先从基础质控和过滤开始吧。&#x1f973; 2.用到的包 rm(list ls()) library(Seurat) library(tidyverse) library(SingleR) library…

钉钉消息防撤回功能研究与实现-可查看历史消息[文件/图文/管理员/链接 撤回拦截]

研究背景 由于在某个大学进行上课的时候,遇到的某个老师,总是习惯发过的消息,到第二天的时候撤回,我们用聊天工具的其中一个原因,不就是因为可以随时去查看发过的消息吗&#xff0c;&#xff0c;而这位老师的操作,也让包括我在内的很多人感到痛不欲生。 想一想,当自己想要去看下…

Error in mounted hook: TypeError: Cannot read properties of undefined (reading isHiddenDay ) found

Error in mounted hook: TypeError: Cannot read properties of undefined (reading isHiddenDay ) found 无法读取未定义的属性‘isHiddenDay’. 在vue中使用fullcalendar在mounted钩子中渲染报错 背景 我在一个小demo中实现还是好好的&#xff0c;并且用的依赖都是6.x版本的…