vue.js - 自定义指令v-focus在vuetify组件上不起作用

Question

我正在尝试使用vuejs自定义指令，该指令称为focus于vuetify中的组件v-field-text。

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

我有一个待办事项 list ，我的待办事项上印有 v-for，每当我单击“编辑”按钮待办事项和待办事项编辑输入摘要时，我也可以编辑待办事项。
我正在使用此focus指令来自动调整输入。
但是当我这样使用时不起作用:

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

但是它是这样的:

<input v-focus />

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

Answer 1

在这些元素上使用div时看到v-focus的原因是因为它们被包装在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>