快速解决element的autofocus失效问题

原因：

autofocus是vue中input的原生属性,element也支持这种方法,

但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。

方法：

绑定ref

<el-input ref="myNameId" v-model="form.name" />

this.$refs.myNameId.focus();

动态绑定ref

<el-input :ref=" 'input'+ form.id " v-model="form.name" />

this.$nextTick(()=>{
 let id = 'input'+this.form.id;
 this.$refs[id].focus();
})

补充知识：element input输入框自动获取焦点

最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。

但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref属性也可以实现聚焦效果：

原理其实很简单，Element 已经提供了 focus 方法，但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性，然后在需要的地方直接调用方法就可以了

<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>

this.$nextTick(() => {
  this.$refs.input.focus()
 })

注意：一个页面只能有一个聚焦效果

last , vue也支持自定义指令

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 // element-ui
 el.children[0].focus()
 // 元素有变化，如show或者父元素变化可以加延时或判断
 setTimeout(_ => {
  el.children[0].focus()
 })
 }
})

以上这篇快速解决element的autofocus失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue请求接口第一次成功,第二次失败问题

    使用vue去请求接口发现问题来了: 我请求只能请求一次,然后在按按钮去请求的时候发现 502(这个是接口定义的)502就是传了空的值过来 这个是其中一种情况,还有别的情况 你看了 大可试试我这样的办法 然后发现我前端代码没有问题,接口代码也没有问题 data() { return { form: { old_password: '', new_password: '', confirm_password: '' } } }, 就是把值在重新赋值回去就可以解决了 this.$http.post('

  • vue axios请求成功却进入catch的原因分析

    问题:axios返回200状态码(即请求成功)却走进了catch里面 原因: 1.当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意:此时控制台并不会报错,因为错误被catch捕获了) 2.axios是异步发起,若发起后页面刷新,那么就会丢失当前进程,导致接收不到.例如 form表单,点击按钮提交后,表单会刷新 补充知识:axios用catch的写法与不使用catch有什么区别? 官网上的写法: axios.post(url

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • vue等两个接口都返回结果再执行下一步的实例

    next 只能調用一次,這邊可以用 Promise.all 解決,等待兩個異步操作都返回結果後再 next: beforeRouteEnter (to, from, next) { // Promise.all 會等到數組內的 Promise 都 resolve 後才會繼續跑(then) Promise.all([ main._base({ methodName: 'QueryProductInfo', productId: to.params.id }), main._base({ metho

  • 快速解决element的autofocus失效问题

    原因: autofocus是vue中input的原生属性,element也支持这种方法, 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集. 方法: 绑定ref <el-input ref="myNameId" v-model="form.name" /> this.$refs.myNameId.focus(); 动态绑定ref <el-input :ref="

  • 关于element el-input的autofocus失效的问题及解决

    目录 element el-input的autofocus失效 elementUI el-input每次输入一个字符后自动失去焦点 总结 element el-input的autofocus失效 需求:下拉新增row, 最后一个定位focus <el-table :data="infoData.itemList" fit header-cell-class-name="cellClass" row-class-name="rowClass"

  • ajax在兼容模式下失效的快速解决方法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里采用第一种,并且使用一种完美兼容性解决办法,在head头部加入 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE"> 即可! 以上这篇ajax在兼容模式下失效的快速解决方法就

  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样.于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法. $(".love .collapse").collapse('hide'); 调用之后发现,点击连接苗,data-parent失效了,也就是可

  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • Android Studio中Run按钮是灰色的快速解决方法

    首先是,在不同的AS中,gradle版本不同,下载的sdk版本不同,这些,都在gradle(Project.Models)相关代码里调过来就好.之前的文章里有说过. 经过调好gradle这些文件,AS已经可以built 成功后. 下一步,Run the application. 这时候,遇到问题:Run按钮灰色,失效. 点击Run旁边 Select Run/Debug Configuration按钮 选择 Edit Configuration,于是: 在model下拉框中选择app.如果下拉框中

  • MySQL数据误删除的快速解决方法（MySQL闪回工具）

    概述 Binlog2sql是一个Python开发开源的MySQL Binlog解析工具,能够将Binlog解析为原始的SQL,也支持将Binlog解析为回滚的SQL,去除主键的INSERT SQL,是DBA和运维人员数据恢复好帮手. 一.安装配置 1.1 用途 数据快速回滚(闪回) 主从切换后新master丢数据的修复 从binlog生成标准SQL,带来的衍生功能 支持MySQL5.6,5.7 1.2 安装 shell> git clone https://github.com/danfengc

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • 快速解决百度编译器json报错的问题

    在MyEclipse中JSON字符串的换行值是不同的,必须以'/n'换行,如果只是json验证的问题,可以把json的验证关掉试试. 点击所在的项目->Project->Proterties->MyEclipse->Validation,把JSON Validator中的Manual和Build的对号给去掉,然后apply,确定,clean缓存. 清除myeclipse缓存的方法如下 找到软件导航窗内的project下的clean,选择要清除缓存的项目,点击clean projec

  • 关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

    最近项目用到了backbone 做前后端的分离方案,遇见了中文乱码问题,解决方案总结如下: 假设需要存一条课程记录到后台 model定义如下: var AddCourse= Backbone.Model.extend({ url:path+"/course/add", parse : function(response){ return response.data; } }); encodeURIComponent 函数 将中文的内容进行编码 $('#addCourseBtn' ).c

随机推荐