批量注册全局指令

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import Directive from './directive'

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

src/directive

// index.ts
import focus from './focus'
import color from './color'
import type { App, Directive } from 'vue'

interface DirectiveProps {
  [key: string]: Directive
}

const directives: DirectiveProps = {
  focus,
  color
}

console.log(directives)
export default {
  install(app: App) {
    Object.keys(directives).forEach(key => {
      app.directive(key, directives[key])
    })
  }
}

// focus.ts
export default {
  mounted(el: HTMLElement) {
    el.focus()
  }
}

// color.ts
import { DirectiveBinding } from 'vue'
export default {
  mounted: (el: HTMLElement, binding: DirectiveBinding) => {
    el.style.color = binding.value
  }
}

index.vue

<template>
  <input type="text" v-focus />
  <div v-color="'red'">测试文本</div>
</template>