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" ...
随机推荐
- [TJOI2015] 概率论 - Catalan数
一棵随机生成的 \(n\) 个结点的有根二叉树(所有互相不同构的形态等概率出现)的叶子节点数的期望.\(n \leq 10^9\) Solution \(n\) 个点的二叉树个数即 Catalan 数 ...
- (转)java 多线程 对象锁&类锁
转自:http://blog.csdn.net/u013142781/article/details/51697672 最近工作有用到一些多线程的东西,之前吧,有用到synchronized同步块,不 ...
- 42.通过原生SQL语句进行操纵mysql数据库
views.py文件中: from django.shortcuts import render # 导入connection模块 from django.db import connection d ...
- pyjsonrpc的使用
pyjsonrpc的使用 客户端 JsonRpcClient.py #!usr/bin/env python2.7 # -*- coding: utf-8 -*- import ssl import ...
- 在windows系统下,配置vue项目一键启动文件
我的项目由客户端.后台管理.数据库和服务器三部分组件,每次启动项目都要一个一个启动,挺麻烦的,现在写一个.bat文件来批处理命令. 这个是我的启动文件内容. 第一行运行的我wampServer服务器, ...
- ECMAScript基本对象——String 对象
对象用于处理文本(字符串). 1.创建 var txt = new String("string"); var txt = "string"; 2.方法 cha ...
- Flink架构,源码及debug
序 工作中用Flink做批量和流式处理有段时间了,感觉只看Flink文档是对Flink ProgramRuntime的细节描述不是很多, 程序员还是看代码最简单和有效.所以想写点东西,记录一下,如果能 ...
- P3206 [HNOI2010]城市建设 [线段树分治+LCT维护动态MST]
Problem 这题呢 就边权会在某一时刻变掉-众所周知LCT不支持删边的qwq- 所以考虑线段树分治- 直接码一发 如果 R+1 这个时间修改 那就当做 [L,R] 插入了一条边- 然后删的边和加的 ...
- codeforces 1284E
计数每一个点被被其他点组成的四边形完全包含的四边形的个数,给出的点没有三点共线的情况 官方题解如下,说的很清楚,也很有技巧 代码也是直接参考官方的题解来的 #include<bits/stdc+ ...
- 内网IPC$入侵加pstools之远程控制
前言: IPC$(Internet process connection)是指内网里面的文件共享连接,通常很多机子的默认共享都是打开的,在cmd下使用命令net share可查看自己的IPC$是否打开 ...