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 相关文章推荐
jQuery插件开发全解析
Oct 10 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
关于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 采集心得技巧
2009/05/15 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
php微信公众号开发之简答题
2018/10/20 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
js实现日期级联效果
2014/01/23 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
使用Python读取大文件的方法
2018/02/11 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
银行员工职业规划范文
2014/01/21 职场文书
活动策划求职信模板
2014/04/21 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
美丽人生观后感
2015/06/03 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js