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

我们希望用户双击 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。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为.例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框. 为了应付这种需求,就做了这个指令,github地址: vue-auto-focus ,欢迎star. example <template> <form v-aut

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

    我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点,而不是需要先手动点一下.input 元素有一个 focus 方法可以来帮我们完成这个事情,但现在的问题是如何在 Vue 中获得这个 input 元素,从而来操作它.Vue 的自定义指令可以完成这个功能. 我们先来看看 Vue 官网的一个示例: 然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令.举个聚焦输入框的例子,如下: 一个输入框: 当页面加载时,该元素将获得焦点 (注意: autofocus

  • Vue自定义指令directive的使用方法分享

    1. 一个指令定义对象可以提供如下几个钩子函数(均为可选) bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中). update:只要当前元素不被移除,其他操作几乎都会触发这2个生命周期,先触发update后触发componentUpdate.虚拟DOM什么时候更新:只要涉及到元素的隐藏.显示(display)值的改变.内容的改变等都会触发虚拟DOM更新. component

  • AngularJS使用自定义指令替代ng-repeat的方法

    前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15

  • vue自定义指令directive的使用方法

    Vue中内置了很多的指令,如v-model.v-show.v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到vue中一个很强大的功能了-自定义指令. 在开始之前,我们需要明确一点,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令. 如何声明自定义指令? 就像vue中有全局组件和局部组件一样,他也分全局自定义指令和局部指令. let Opt = { bind:function(e

  • vue3 自定义指令详情

    目录 一.注册自定义指令 1.1.全局自定义指令 1.2.局部自定义指令 二.自定义指令中的生命周期钩子函数 三.自定义指令钩子函数的参数 四.自定义指令参数 一.注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令. 1.1.全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象上,使用 Vue.directive('name',opt). 实例1:Vue2 全局自定义指令 Vue.directive('focus',{ inserted:(e

  • Angular17之Angular自定义指令详解

    Angular17之Angular自定义指令详解

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.2 ElementRef 作为DOM对象的引用

  • 使用Vue自定义指令实现Select组件

    本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu

  • vue2.0自定义指令示例代码详解

    1.什么是指令? 指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记. 除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外, Vue 还允许你注册自己的自定义指令.某些情况下,还是需要对普通元素进行一些底层 DOM 访问, 这也是自定义指令仍然有其使用场景之处. 2.全局指令: 当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态.现在让我们构建指令以完成此效果: <te

  • 理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

  • vue2 对全局自定义指令一次性进行注册的方法

    vue2 对全局自定义指令一次性进行注册的方法

    在src下新建文件夹directive/index.js index.js文件中用来写入注册方法 /* * @Author: 周云芳 * @Date: 2022-06-28 15:21:41 * @LastEditors: 周云芳 * @LastEditTime: 2022-06-28 16:44:16 * @Description: 用于自动注册全局自定义指令 * 使用规则: * 根据导出的name在页面使用如directives对象中的name为el-drag-dialog,页面使用:v-e

随机推荐