Vue Elementui 如何让输入框每次自动聚焦
在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦。如下图。一般情况下提示框是隐藏的。点击了编辑才会弹出。

那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有第一次有用。
然后尝试了ref,再this.$refs.el 也不能成功拿到该元素,因为饿了么组件封装的<el-input>对应的是外面一个div,里面包了个input,在获取元素的时候有问题的。
第二种尝试,利用class 或者id 获取元素,然后再手动聚焦 el.focus(),好像也不起作用。
然后查看文档决定用,diretives 自定义指令,然而还是怎么弄都没用。

最后又是网上各种查,才明白,inserted 只在元素插入的时候才有用,然而饿了么组件中提示框的隐藏显示是v-show原来。
没办法最后只能把<el-input> 替换掉,换成原生标签 input ,样式上直接class复制一下之前的样式吧。 v-if 与提示框的 v-show的值绑定在一起,这样就轻松实现啦!

总结反思,对vue的自定义指令原理不熟悉 ,对饿了么组件的封装原理也不是十分明白。
总觉得还有更简单的方法,希望大佬们多指教!!!
Vue Elementui 如何让输入框每次自动聚焦的更多相关文章
- vue:element-ui输入框绑定回车事件
参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...
- .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架
框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...
- 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决
关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
随机推荐
- git添加比较和合并工具(meld)
git 下的(difftool)和(mergetool)是专门提供给使用者用自己的工具进行diff和merge的命令: # git config --global diff.tool meld # g ...
- Spring -- 配置bean的三种方法
配置通过静态工厂方法创建的bean public class StaticBookFactory { //静态工厂方法: public static Book getBook(String bookN ...
- Java面向对象 线程技术--上篇
Java面向对象 线程 知识概要: (1)线程与进程 (2)自定义线程的语法结构 (3)多线程概念理解 (4)多线程状态图 (5)多线程--卖票 (6)同 ...
- Elasticsearch分片、副本与路由(shard replica routing)
本文讲述,如何理解Elasticsearch的分片.副本和路由策略. 1.预备知识 1)分片(shard) Elasticsearch集群允许系统存储的数据量超过单机容量,实现这一目标引入分片策略sh ...
- The Twelve-Factor App 实践
The Twelve-Factor App <The Twelve-Factor App>定义了一个优雅的互联网应用在设计过程中,尤其是在设计SAAS服务时,需要遵循的一些基本原则.本文为 ...
- spring两大核心对象IOC和AOP(新手理解)
现在自己对spring的理解是:spring的主要的作用是用来进行业务的处理和实现类与类之间的解耦. 其中实现解耦功能 是IOC(控制反转)通过sessionfactory工厂来为需要的对象注入对应的 ...
- 关于KVO导读
入门篇 KVO是什么? Key-value observing is a mechanism that allows objects to be notified of changes to spec ...
- Linux入门(16)——Ubuntu16.04下配置sublime text 3使用markdown
sublime text 3安装两个插件: MarkDown Editing OmniMarkupPreviewer 有的人使用 MarkDown Editing markdownpreviewer ...
- MyBatis 笔记总结
1.MyBatis中的一些要点: 1.1 SqlMapConfig.xml:mybatis的全局配置文件,配置mybatis的运行环境等信息,包括mapper.xml文件 1.2 mapper.xml ...
- JS难点--面向对象(继承)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } 继承 让一个对象拥有另一个对象的属性或者 ...