自定义指令 v-focus 不适用于 vuetify 组件答案

【问题标题】：Custom directive v-focus is not working on vuetify component自定义指令 v-focus 不适用于 vuetify 组件
【发布时间】：2020-01-27 19:59:17
【问题描述】：

我正在尝试使用名为 focus 的 vuejs 自定义指令来关注来自 vuetify 的组件，即 v-field-text。

directives: {
    focus: {
      // directive definition
      inserted: function(el) {
        el.focus();
      }
    }
  }

我有一个待办事项列表，我的待办事项打印为v-for，我还有一个编辑待办事项的选项，每当我点击编辑按钮时，待办事项消失，待办事项编辑输入出现。
我正在使用这个焦点指令来自动聚焦输入。

但是，当我像这样使用它时不起作用：

<v-field-text v-focus></v-field-text>

但它的工作原理是这样的：

<input v-focus />

当我从指令中 console.log el 时，我看到它引用了由 vuetify 创建的 div 元素。如何解决这个问题？

【问题讨论】：

也许 bcs <v-field-text v-focus></v-text-field> 有错字？应该是<v-text-field....>
不，抱歉，我写这个问题时打错了。

标签： vue.js vuetify.js

【解决方案1】：

请尝试此解决方案。它对我有用：

 directives: {
        focus: {
          // directive definition
      inserted: function (el) {
          let childData = el.querySelectorAll("input")[0]; 
          childData.focus()
        }
          }
        }

【讨论】：

【解决方案2】：

在这些元素上使用v-focus 时看到div 的原因是它们被包装在一个div 中。要使用您无法控制代码的第三方组件来解决此问题，您可以使用以下函数：

import Vue from 'vue'

Vue.directive('focus', {
  inserted: function(el) {
    // Recursion based function for finding an input
    // nested within other elements.
    let findInput = (el, max_depth = 5) => {
      // We found the input, so we return it, which causes
      // the entire function stack to pop
      if (el.nodeName === 'INPUT') {
        return el
      }

      // Prevent infinite recursion by providing a maximum
      // depth, and returning when we've reached that depth
      if (max_depth === 0) {
        return null
      }

      // Our current element is not an input, so we need to loop
      // over its children and call findInput recursively
      for (let child of el.children) {

        let input = findInput(child, max_depth - 1)

        // We've found our input, return it to unwind the stack
        // otherwise, continue through the loop
        if (input) {
          return input
        }
      }

      // Fallback in case for when el has no children, or we reached the end of the loop with no input
      return null
    }

    // Start searching for the input.  We can optionally
    // pass a higher max_depth.  Use with caution.
    let input = findInput(el, 20)

    if (input) {
      input.focus()
    }
  }
})

这是使用递归遍历每个子元素，搜索带有nodeName === 'INPUT' 的元素。

例如，将解析以下复杂结构并聚焦找到的第一个输入：

<div v-focus>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                Hello
              </div>
              <p>
                world
              </p>
              <span>!</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <input type="text" value="I will be focused">
      </div>
    </div>
  </div>
</div>

【讨论】：