vue 自定义指令 获取焦点

要在Vue中创建一个自定义指令，让输入框获取焦点，你需要在Vue实例的directives属性中定义一个名为"focus"的指令，并在inserted方法中使用原生的focus()方法将焦点设置为当前元素。具体代码如下:

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
}

然后，在需要获取焦点的输入框上使用v-focus指令即可。在App.vue的模板中，你可以将v-focus指令添加到<input type="text">元素上，如下所示:

<template>
  <div>
    <input type="text" v-focus>
  </div>
</template>

这样，当组件渲染完成后，该输入框会自动获取焦点。请注意，这个自定义指令只在当前组件的作用域内有效。如果你希望在全局范围内使用这个指令，你需要在全局注册它。可以使用Vue.directive方法实现全局注册，如下所示:

Vue.directive("focus", {
  inserted(el) {
    el.focus();
  }
});

这样，无论在哪个组件中，你都可以在输入框上使用v-focus指令，以获取焦点。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 自定义指令 自动获取焦点](https://blog.csdn.net/laoli360/article/details/120555899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]