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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
JavaScript隐式类型转换代码实例
May 29 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
Yii框架form表单用法实例
2014/12/04 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
vue实现搜索功能
2019/05/28 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
二手书店创业计划书
2014/01/16 职场文书
一帮一活动总结
2014/05/08 职场文书
学生吸烟检讨书
2014/09/14 职场文书
公民授权委托书范本
2014/09/17 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2014年电工工作总结
2014/11/20 职场文书
旷工检讨书大全
2015/08/15 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js