Vue中自动获取input焦点
<input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路">
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作
2.Vue官网给出的解决办法
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//组件注册,与created、mounted同级
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
//使用方式
<input v-focus>
inserted(钩子函数):被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
3.适合Vue
mounted () {
this.$nextTick(() => {
this.$refs.input.focus()
})
}
但是我发现,这些方法都没解决第一次进入页面,input获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。
Vue中自动获取input焦点的更多相关文章
- vue element-ui 自动获取光标
<el-input ref="customerInput"></el-input> this.$refs.mark.$el.querySelector('i ...
- vue中如何获取后台数据
原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- vue中多个input绑定enter按键事件
默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...
- vue中js获取组件实例
获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...
- Vue中对获取的数据进行重新排序
var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组,来接收数据.listJust: [] addDat ...
- vue中 js获取图片尺寸 设置不同样式
1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式
- 在vue中获取微信支付code及code被占用问题的解决?
这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...
- 17、前端知识点--Vue中ref的使用
methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...
随机推荐
- 安装MongoDB到CentOS(YUM)
运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:mongodb-org-4.0.8 硬件要求:无 安装过程 1.配置YUM-Mongodb存储库 ...
- Chapter1 递归与递推
Chapter 1 递归与递推 时间复杂度(转载自yxc大佬) 一般ACM或者笔试题的时间限制是1秒或2秒. 在这种情况下,C++代码中的操作次数控制在 107107 为最佳. 下面给出在不同数据范围 ...
- 如何在Mac OS X上将PDF转换为Microsoft Word
Lighten PDF to Word Converter for Mac是一个简单但功能强大的应用程序,可将PDF文件准确,轻松地转换为Microsoft Word.它可以保留原始内容的布局,格式, ...
- WPF实现高仿统计标题卡
飘哇~~~,在家数瓜子仁儿,闲来无事,看东看西,也找点儿,最近正在看看WPF动画,光看也是不行,需要带着目的去学习,整合知识碎片,恰巧,看到Github中一个基于Ant Designer设计风格的后台 ...
- 小白月赛22 J : 计算 A + B
J:计算 A + B 考察点 : 高精度,字符串 坑点 : 字符串中可能全是数字,或者 + 超过 1 个,需要进行特殊判断 析题得侃: 关于高精度的各种板子 Code: #include <ve ...
- mysql执行顺序及左连接和右连接
SELECT语句执行顺序 SELECT语句中子句的执行顺序与SELECT语句中子句的输入顺序是不一样的,所以并不是从SELECT子句开始执行的,而是按照下面的顺序执行: 开始->FROM子句-& ...
- jQuery---手风琴案例
手风琴案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- int long的数据范围
java 整数型 byte 1字节 -128~127 -2^7~2^7-1 short 2字节 -32768~32767 int 4个字节 -2147483648~2147483647 -2 ...
- H3C接口管理配置
一.接口批量配置 当多个接口需要配置某功能(比如shutdown)时,需要逐个进入接口视图,在每个接口执行一遍命令,比较繁琐.此时,可以使用接口批量配置功能,对接口进行批量配置,节省配置工作量. 1. ...
- thinkphp5出现mkdir() Permission denied报错解决办法
如果没有runtime目录,则需要手动创建一个,并且给runtime添加权限: mkdir runtime chmod -R 777 runtime 报错如下: