vue动态设置Iview的多个Input组件自动获取焦点
1、html,通过ref=replyBox设置焦点元素,以便后续获取
// 动态设定自动获取焦点按钮
<p class="text-right text-blue fts14 ptb10 pointer" @click="replySet(comment,comment,1,index)" v-if="comment.replyList && comment.replyList.length > 0">我要回复</p>
// textarea输入框
<Input class="mb10" type="textarea" v-model="replyContent" ref="replyBox" :placeholder="beReplyName ? '@ ' + beReplyName : '在这里描述你的详细内容…'" />
2、js控制,必须放在this.$nextTick里面才能控制,Input如果是for循环出来的,则必须用replyBox[0]才能获取当前的textarea
this.$nextTick(()=>{
this.$refs.replyBox[0].focus()
})
vue动态设置Iview的多个Input组件自动获取焦点的更多相关文章
- 鼠标经过INPUT时自动获取焦点
鼠标经过INPUT时自动获取焦点 <input type="text" name="addr" onMouseOver="this.focus( ...
- vue动态设置页面title方法
第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...
- Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...
- Vue 动态设置图片路径
大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的 本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...
- vue动态设置初始页
- vue动态 设置类名
<div class="tab"> <navigator :class="currentTab=='mzfw'?'nav active': 'nav'& ...
- Vue系列之 => 自定义全局指定让文本框自动获取焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- input输入框自动获取焦点
只要在该input标签后添加autofocus="autofocus"即可 代码实例: <html> <head></head> <bod ...
- 进到页面后input输入框自动获取焦点
<html> <head></head> <body> 用户名:<input type="text" ...
随机推荐
- windows 使用 git 客户端
git客户端下载地址:https://www.git-scm.com/ tortoisegit下载地址:https://tortoisegit.org/ 双击下载的安装包,默认安装直到完成. 打开gi ...
- 【leetcode】816. Ambiguous Coordinates
题目如下: 解题思路:我的方案是先把S拆分成整数对,例如S='1230',先拆分成(1,230),(12,30),(123,0),然后再对前面整数对进行加小数点处理.比如(12,30)中的12可以加上 ...
- php range()函数 语法
php range()函数 语法 作用:创建一个包含指定范围的元素的数组.dd马达哪家好 语法:range(low,high,step) 参数: 参数 描述 low 必需.规定数组的最低值. hig ...
- GIS矢量大数据采集
1.使用什么工具采集 2.在哪个网站采集 3.采集哪一种数据 >>地理大数据公众号 >>大数据公众号 >>智能数据湖公众号 点.线.面.体 可视化 >> ...
- Trailing Zeroes (III) -;lightoj 1138
Trailing Zeroes (III) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Y ...
- 学习日记9、easyui控件两次请求服务器端问题
<select id="BankCard" class="easyui-combobox" style="width: 600px;" ...
- html5: postMessage解决跨域通信的问题
效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...
- php面试专题---8、会话控制考点
php面试专题---8.会话控制考点 一.总结 一句话总结: 主要是cookie和session的区别,以及用户禁用cookie之后怎么使用session 1.为什么要使用会话控制技术? 因为http ...
- jajaj
Docs » 第二章:字符串和文本 » 2.2 字符串开头或结尾匹配 Edit on GitHub 2.2 字符串开头或结尾匹配¶ 问题¶ 你需要通过指定的文本模式去检查字符串的开头或者结尾,比如文件 ...
- JS-线程、事件循环、任务队列
JS 是单线程的,但是却能执行异步任务,这主要是因为 JS 中存在事件循环(Event Loop)和任务队列(Task Queue). 事件循环: JS 会创建一个类似于 while (true) 的 ...