自定义指令实现自动聚焦

2019-01-076123 阅读4 评论

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

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

-- EOF --

4 评论
登录后回复
wheatPassersby
2021-08-11 19:46:47

试了一下聚焦没问题,但还有一点就是.当鼠标双击后,不改值,鼠标点到空白处,input的text框居然还在.不知道什么方法可以让其,失去光标.失去焦点后,依旧隐藏控件.

回复
zhangyupeng233
2019-07-31 16:43:16

这一步没能实现, 我把v-focus绑定到newTodoTitle这个input上,能自动聚焦,

但是绑定到v-for中的input时, 无法自动聚焦,使用 v-if 和 v-show都存在这个问题,

网上有人遇到了同样的问题, 解决方法是用class来控制显隐 弃用vue的显隐指令

帖子链接:   vue 自定义指令 focus 条件聚焦 时,在与v-if共存时需要处理的问题

回复
Bethink zhangyupeng233
2019-08-12 16:33:03

我用的Vue.js v2.5.16
chrome  76.0.3809.100

按教程里的方法写,是会自动focus的。

我第一次写也没有生效,检查了一下,发现是focus拼写错了。

回复
Foolgry zhangyupeng233
2020-03-28 14:41:00

可以用update来聚焦

directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                },
                update(el) {
                    el.focus();
                },
            }
        }

回复