一、vue3通过全局自定义指令来实现自动获得焦点（setup组合式api）

1. 创建一个utils文件夹
2. 在utils文件夹中创建focus.js文件
3. 写一个函数传入app并且导出

export default function directiveFocus(app) {
  app.directive("focus", {
    //生命周期的函数(自定义指令)
    mounted(el) {
      el?.focus();
    },
  });
}

4. 在utils文件夹中创建一个index.js文件夹将自定义指令进行统一管理
5. 在indexjs引入focus指令，放到directives函数中，该函数也传入app,给每一个指令传app,并且暴露

import directFocus from "./focus";
export default function directive(app) {
  directFocus(app);
}

5. 在main.js，中引入第二步的index文件并目用use0使用。use会自动传入app参数的，内部做了这个操作

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import directives from "@/utils/index";
createApp(App).use(store).use(router).use(directives).mount("#app");

二、vue3通过局部自定义指令实现文本框自动获得焦点（setup组合式api）

• html

• setup中

const VFocuss = { //注意要写成这种格式用的时候使用 v-VFocuss
  mounted(el) {
    el?.focus()
  }
}

vue2使用全局自定义指令实现文本框自动获得焦点

1. 全局方法一 直接在main.js中注册 但是这样代码比较臃肿 不好维护

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

1. 全局方法二 直接在main.js中注册 但是这样代码比较臃肿 不好维护

• 创建一个utils文件夹
• 在utils文件夹中创建一个focus.js文件

import Vue from "vue";

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

• 在utils文件夹中创建一个index.js

// 导入指令定义文件
import focus from "./focus";
// 集成一起
const directives = {
  focus,
};
//批量注册
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

• 在main.js中注册自定义指令

import Directives from "@/utils/index";
Vue.use(Directives);

vue2使用局部自定义指令实现文本框自动获得焦点

    // 注册一个局部自定义指令 `v-focus`
    directives: { //和data同级
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }