Vue 回顾之指令（关于input自动聚焦的问题）

Posted 2021-01-31 cangqinglang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 回顾之指令（关于input自动聚焦的问题）相关的知识，希望对你有一定的参考价值。

用了Vue也一年多了，虽然对大部分内容都比较熟悉，但有些用法可能会起到意想不到的作用。

今天在做一个关于抽奖的需求，要求是每次点击编辑按钮显示编辑框，要求自动聚焦。

技术分享图片

一开始想到了autofocus属性，结果发现每次只有刷新页面的第一次会生效，之后无论怎么点击都不能自动聚焦，于是网上查了很多资料，

最终问题指向了vue的指令，因此先回过头看看vue的指令部分。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive(‘focus‘, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

<input v-focus>

好了，问题看似得到了解决。但在具体的项目中，我们在inserted中拿到的el可能不是input节点（比如直接使用了第三方组件库），这时就需要遍历el的childNode属性，获得我们

想要的input元素引用，从而调用focus方法。

至此，问题圆满解决。

以上是关于Vue 回顾之指令（关于input自动聚焦的问题）的主要内容，如果未能解决你的问题，请参考以下文章