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原型链示例分享
Jan 26 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
解析js如何获取css样式
Dec 11 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
validform表单验证的实现方法
Mar 08 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
聊天室php&amp;mysql(二)
2006/10/09 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
javascript每日必学之封装
2016/02/23 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
详解vue 命名视图
2019/08/14 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
日语专业推荐信
2013/11/12 职场文书
房地产促销活动方案
2014/03/01 职场文书
主题党日活动总结
2014/07/08 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2015年公务员工作总结
2015/04/24 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书