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" ...
随机推荐
- generalization error
泛化误差 机器学习中的Bias(偏差),Error(误差),和Variance(方差)有什么区别和联系? 准与确的关系 bias 偏差:模型越复杂,模型的偏差越小,方差越小,因此会出现overfitt ...
- Pikachu-XXE(xml外部实体注入漏洞)
XXE -"xml external entity injection"既"xml外部实体注入漏洞".概括一下就是"攻击者通过向服务器注入指定的xml ...
- win10c盘被下满文件解决办法
今天更新系统,发现一个巨坑,好不容易软件配置的环境,开始以为是病毒,重装后在弄发现还是这个问题.经过两天的亲测解决办法: win7 svchost.exe占用内存和CPU很高,电脑很卡的解决方法:ht ...
- gulp常用插件之del使用
更多gulp常用插件使用请访问:gulp常用插件汇总 del这是一款删除文件的工具. 更多使用文档请点击访问del工具官网. 安装 npm install del API del(patterns, ...
- super().__init__()方法
class first(object): def __init__(self,age,name): self.age = age self.name = name class second(first ...
- LRU算法实现 最近最久未使用
1.LRU算法实现 最近最久未使用(蚂蚁金服笔试题,本人亲自经历的[苦笑.jpg]) 实现原理:数组 主要功能:初始化.入队列 主要操作:数组元素移动 代码: package com.ch.evalu ...
- 数位dp(模板+例题)
文章参考:数位dp之总结 首先,什么是数位dp?它是干什么的? 数位dp是一种计数用的dp,一般就是要统计一个区间[le,ri]内满足一些条件数的个数. 举个栗子: 加入我们要枚举所有上界不超过231 ...
- Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class 消费者提示需要配置数据源
使用 由于给前端做分页 在启动消费者的时候遇到了这个问题 Failed to configure a DataSource: 'url' attribute is not specified and ...
- 你写的 Python 代码总是不规范?用它!
今天咱们来说说 代码风格 ! 不同的编程语言 有不同的代码风格 Python 的代码规范 就是人们常说的 PEP8 在这个网站 https://www.python.org ...
- C# extract img url from web content then download the img
static void Main(string[] args) { WebClientDemo(); Console.ReadLine(); } static void WebClientDemo() ...