Vue2.x Todo之自定义指令实现自动聚焦的方法


Posted in Javascript onJanuary 08, 2019

我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点,而不是需要先手动点一下。input 元素有一个 focus 方法可以来帮我们完成这个事情,但现在的问题是如何在 Vue 中获得这个 input 元素,从而来操作它。Vue 的自定义指令可以完成这个功能。

我们先来看看 Vue 官网的一个示例:

然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:

一个输入框:

当页面加载时,该元素将获得焦点 (注意: autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

// 注册一个全局自定义指令 `v-focus` 

Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

如果想注册局部指令,组件中也接受一个 directives 的选项:

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }

指令是什么,就是用来指导被绑定的元素的行为,我们之前接触过 v-if、v-model、v-bind 等指令,官方文档说的非常清楚,我们可以自己注册一个指令,然后实现某些钩子函数,从而指定被绑定元素的行为。这里我们依葫芦画瓢,实现一个 focus 指令,这个指令实现了 inserted 钩子函数,这个函数在被绑定的元素被插入 dom 时触发,且被绑定的元素会作为参数传入钩子函数,我们就可以在函数中对它操作。

我们在 Vue 对象中声明局部指令:

<script>
  let id = 0; // 用于 id 生成
  var app = new Vue({
    ...
    methods: {
      ...
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    }
  })
</script>

然后就可以使用这个指令了,把它绑定到编辑框,这样编辑框出现时指令就被触发,从而聚焦。

<input type="text" 
    value="编辑 todo..."
    v-focus="true"
    v-if="editedTodo!==null && editedTodo.id===todo.id"
    v-model="todo.title"
    @keyup.enter="editDone(todo)"
    @keyup.esc="cancelEdit(todo)"/>

注意因为元素一旦出现一定要聚焦的,所以条件始终为 true。

现在用户体验好多了!快打开浏览器体验一下吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Javascript接收get传递的值的代码
Nov 30 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
javascript实现完美拖拽效果
May 06 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
关于React动态加载路由处理的相关问题
Jan 07 #Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 #Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 #Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 #Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 #Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 #Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
You might like
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python离线安装外部依赖包的实现
2020/02/13 Python
中科软测试工程师面试题
2012/06/16 面试题
大学生实习感言
2014/01/16 职场文书
2014最新离职证明范本
2014/09/12 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js