vue批量注册全局自定义指令

vue3批量注册自定义指令，又双叒叕踩坑了

之前在vue2中使用过批量注册指令的方法，不过vue2的模式在Vue3中竟然行不通了，我一脸懵逼的琢磨了大半个小时，最后还是用了一个不是很完美的方法

vue2中批量注册指令

在 @/utls/directives/init.js 中收集所有指令创建并进行注册

// @/utls/directives/init.js
import directive1 from '@/utls/directives/directive1'
import directive2 from '@/utls/directives/directive2'
// 构建
const directives = {
  directive1,
  directive2,
}

export default {
  install (Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  },
}

在 mian.js 中注入指令，就可以在Vue模板中使用指令了

// main.js
import Vue from 'vue'
import directives from './directives/index'
Vue.use(directives)

如果还有疑问可以去看这位老兄的博客

https://blog.csdn.net/HH18700418030/article/details/128955606

vue directive 批量注册自定义指令

vue3中批量注册指令

!!!这种写法不一定规范，但是能够解决指令无法注册的问题，步骤一样，方法有点出入

@/utls/directives/ 中插件的写法

// @/utls/directives/directive1
export default (Vue) => {
  Vue.directive("directive1", {
    created(el) {
      // 逻辑代码
    },
    ...
  })
}

在 @/utls/directives/init.js 中收集所有指令创建并进行注册

// @/utls/directives/init.js
import directive1 from '@/utls/directives/directive1'
import directive2 from '@/utls/directives/directive2'
// 构建指令队列
const directives = [
  directive1,
  directive2,
]
// 注册队列中所有的指令
const initDeretives = (app) => {
  directives.forEach(e => e(app))
}

export default initDeretives;

main.js 中注入插件

// main.js
import { createApp } from 'vue'
import initDeretives from '@/utils/derectives/index.js'

const app = createApp(App)
app.use(initDeretives)
app.mount('#app')

感谢观看，如果对你有帮助可以关注本站，龙小亦在此谢过了

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。