Vue 回顾之指令(关于input自动聚焦的问题)
用了Vue也一年多了,虽然对大部分内容都比较熟悉,但有些用法可能会起到意想不到的作用。
今天在做一个关于抽奖的需求,要求是每次点击编辑按钮显示编辑框,要求自动聚焦。
一开始想到了autofocus属性,结果发现每次只有刷新页面的第一次会生效,之后无论怎么点击都不能自动聚焦,于是网上查了很多资料,
最终问题指向了vue的指令,因此先回过头看看vue的指令部分。
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:
当页面加载时,该元素将获得焦点 (注意:autofocus
在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:
// 注册一个全局自定义指令 `v-focus` |
如果想注册局部指令,组件中也接受一个 directives
的选项:
directives: { |
然后你可以在模板中任何元素上使用新的 v-focus
属性,如下:
<input v-focus> |
好了,问题看似得到了解决。但在具体的项目中,我们在inserted中拿到的el可能不是input节点(比如直接使用了第三方组件库),这时就需要遍历el的childNode属性,获得我们
想要的input元素引用,从而调用focus方法。
至此,问题圆满解决。
Vue 回顾之指令(关于input自动聚焦的问题)的更多相关文章
- Vue自定义指令实现input限制输入正整数
directive.js import Vue from 'vue' export default () => { Vue.directive('Int', { inserted: functi ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
- Vue Elementui 如何让输入框每次自动聚焦
在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦.如下图.一般情况下提示框是隐藏的.点击了编辑才会弹出. 那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- Vue(九) 自定义指令
前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- vue怎么自定义指令??
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
随机推荐
- MySQL参数log_bin_trust_function_creators介绍-存储过程和复制
MySQL的有个参数log_bin_trust_function_creators,官方文档对这个参数的介绍.解释如下所示: log_bin_trust_function_creators Comma ...
- sql server 如何查询出数据库作业所有者的信息并完成批量替换
今天数据库对入职一年的我建立了独立的数据库账号,之前我是和其他同事共享的,之前的所有者账号被废弃了,这时导致很多数据库作业执行失败. 下面是说明如何把之前所有的作业的所有者替换成正在使用的账号: 下面 ...
- 变量计算——强制类型转换的js面试题
console.log(1+"2"+"2"); console.log(1++"2"+"2"); console.log ...
- File类_深度遍历文件夹_练习
遍历指定目录下的所有文件和文件夹 import java.io.File; public class FileTest { public static void main(String[] args) ...
- [USACO09JAN]安全出行Safe Travel
题目 什么神仙题啊,我怎么只会\(dsu\)啊 我们考虑一个非常暴力的操作,我们利用\(dsu\ on \ tree\)把一棵子树内部的非树边都搞出来,用一个堆来存储 我们从堆顶开始暴力所有的边,如果 ...
- [Sdoi2010]古代猪文 (卢卡斯定理,欧拉函数)
哇,这道题真的好好,让我这个菜鸡充分体会到卢卡斯和欧拉函数的强大! 先把题意抽象出来!就是计算这个东西. p=999911659是素数,p-1=2*3*4679*35617 所以:这样只要求出然后再快 ...
- day15 Python函数递归,轻易不要用递归,容易搞出来内存溢出
古之欲明明德于天下者,先治其国:欲治其国者,先齐其家:欲齐其家者,先修其身:欲修其身者,先正其心:欲正其心者,先诚其意:欲诚其意者,先致其知,致知在格物.物格而后知至,知至而后意诚,意诚而后心正,心正 ...
- windows系统下Disconf web安装-分布式配置管理平台
文章参考自 http://blog.csdn.net/syc001/article/details/78128117 https://www.cnblogs.com/mrluo735/p/632271 ...
- 基于SaaS的企业数据隐私保护平台
导读 WireWheel成立于2016年,总部位于华盛顿,该公司致力于降低数据隐私保护合规能力建设的难度,帮助企业来应对复杂.严厉的法案.条例规定.2018年10月,公司获得了PSP Growth领投 ...
- docker官方文档笔记
Docker在 CentOS7.X上运行.Docker可能在其他EL7的兼容版本中成功安装,但是官方并未进行测试,因此也不提供任何支持. 系统环境要求 docker必须运行在64-bit的系统上,对于 ...