element input 自适应_vue自定义指令实现element中input 自动获取焦点

不念不忘少年蓝@ 2022-12-31 15:27 226阅读 0赞

项目的一个需求，记录分享一下，希望帮助别人少踩坑。先简单说一下需求：左侧是tree结构，右侧是表单，实现功能就是点击tree节点，对应的右侧input获取焦点

![Image 1][]

注册自定义指令

指令可以是全局注册也可以是局部注册，看你自己的想法喽，我这块是实现的全局注册

directives: \{

focus: \{

// 绑定判断

inserted: function(el, \{ value \}) \{

if (value) \{

el.children\[0\].focus();

\}

\},

//更新判断

update: function(el, \{ value \}) \{

if (value) \{

el.children\[0\].focus();

\}

\},

//更新完成s

componentUpdated: function(el, \{ value \}) \{\}

\}

\}

！！！非常重点的就是el.children\[0\]。具体看图

![Image 1][]

我觉得大家应该明白了，为啥是第一个子元素了，因为element渲染后，结构是div包着input，你的指令给div是没有任何效果滴。需要注意这块

逻辑代码

光指令了，没有逻辑代码也是不行滴啊，我就顺便贴出来吧，反正也不费事请。(保证指令的正常更新，每次只有一个input选中)

updateFocusStatus(id) \{

let \_this= this;

let children= \_this.data\[0\].children;if(children\[id\].focus) \{

children\[id\].focus= !children\[id\].focus;return;

\}

children.map(n=>\{

n.id!= id ? (n.focus = false) : (n.focus = true);

\});

\},

handleNodeClick(data) \{

let \_this= this;

console.log(data.id+ ":" +data.focus);

\_this.updateFocusStatus(data.id);

\}

结尾：希望自己每天都可以进步一点点。努力！

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 element input 自适应_vue自定义指令实现element中input 自动获取焦点

项目的一个需求，记录分享一下，希望帮助别人少踩坑。先简单说一下需求：左侧是tree结构，右侧是表单，实现功能就是点击tree节点，对应的右侧input获取焦点 ![Image

不念不忘少年蓝@/ 2022年12月31日 15:27/ 0 赞/ 227 阅读

相关 element table 实现input输入框回车键跳入下一行，自动获取焦点

element table 实现input输入框回车键跳入下一行，自动获取焦点 ![cb4ee2ba83caca7b1fafb605bd8851f8.png][] 使用动态

墨蓝/ 2022年09月10日 07:18/ 0 赞/ 439 阅读

相关 vue通过自定义指令使input输入框自动获取焦点

在部分开发场景中我们需要input输入框自动获取焦点我们可以通过以下代码实现使用自定义指令 v-focus <template> <el

我就是我/ 2022年08月28日 12:44/ 0 赞/ 196 阅读

相关深究AngularJS——如何获取input的焦点（自定义指令）

![在这里插入图片描述][20190627123607465.png] 1. 写在前面关于如何获取input框、textarea等的焦点，网上有许多文章都只

深藏阁楼爱情的钟/ 2022年07月24日 03:26/ 0 赞/ 213 阅读

相关 el-input不能获取自定义聚焦指令

首先贴出的是el-input代码 <el-input clearable type="text" v-model="form.username" v-focus cl

水深无声/ 2022年04月10日 01:47/ 0 赞/ 209 阅读

相关深究AngularJS—如何获取input的焦点（自定义指令）

一.写在前面　　关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求

喜欢ヅ旅行/ 2022年04月06日 10:54/ 0 赞/ 312 阅读

相关 vue input自动获取焦点

方法一这个方法适合vue插件，id比较好绑定 // html 部分 <input type="text" id="name">

逃离我推掉我的手/ 2022年03月16日 14:54/ 0 赞/ 379 阅读

相关 VUE自定义指令获取焦点

<input type="text" name="" id="input" class="form-control" value="" required="required"

叁歲伎倆/ 2021年12月19日 04:57/ 0 赞/ 377 阅读

相关 vue+element实现自定义主题功能

1. 第一步按照element官网介绍安装依赖 npm i element-theme -g npm i element-theme-chalk -D

心已赠人/ 2021年12月05日 20:57/ 0 赞/ 464 阅读

相关 Vue中自动获取input焦点苹果手机无效？

<input v-focus type="text" autofocus placeholder="请输入..." v-model="searchVal" class=

矫情吗；*/ 2021年09月19日 14:24/ 0 赞/ 780 阅读