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 遍历验证所有文本框的值
Aug 27 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
vue-dialog的弹出层组件
May 25 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
关于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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php MySQL与分页效率
2008/06/04 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
详解jquery uploadify 上传文件
2013/11/09 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
js实现搜索栏效果
2018/11/16 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
python tkinter实现连连看游戏
2020/11/16 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
销售辞职报告范文
2014/01/12 职场文书
委托书模板
2014/04/04 职场文书
促销活动计划书
2014/05/02 职场文书
大学生简历求职信
2014/06/24 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
中学生自我评价范文
2015/03/03 职场文书
2015年妇女工作总结
2015/05/14 职场文书
李强感恩观后感
2015/06/17 职场文书
python获取对象信息的实例详解
2021/07/07 Python
数据库之SQL技巧整理案例
2021/07/07 SQL Server
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers