调整自定义指令引入方式

src/main.ts

@@ -8,8 +8,8 @@ import '@/assets/styles/global.scss'
 import '@/assets/styles/antd.scss'
 import 'animate.css'
 
-import contextmenu from './plugins/contextmenu'
-import clickOutside from './plugins/clickOutside'
+import Contextmenu from './plugins/contextmenu'
+import ClickOutside from './plugins/clickOutside'
 
 import IconFont from '@/components/IconFont'
 import FileInput from '@/components/FileInput.vue'
@@ -51,8 +51,8 @@ app.component('Input', Input)
 app.component('InputGroup', Input.Group)
 app.component('Modal', Modal)
 
-app.use(contextmenu)
-app.use(clickOutside)
+app.directive('contextmenu', Contextmenu)
+app.directive('click-outside', ClickOutside)
 
 app.component('IconFont', IconFont)
 app.component('FileInput', FileInput)

src/plugins/clickOutside.ts

@@ -1,4 +1,4 @@
-import { Directive, App, DirectiveBinding } from 'vue'
+import { Directive, DirectiveBinding } from 'vue'
 
 const CTX_CLICK_OUTSIDE_HANDLER = 'CTX_CLICK_OUTSIDE_HANDLER'
 
@@ -28,9 +28,4 @@ const ClickOutsideDirective: Directive = {
   },
 }
 
-export default {
-  install(app: App) {
-    app.directive('click-outside', ClickOutsideDirective)
-  },
-  directive: ClickOutsideDirective,
-}
+export default ClickOutsideDirective

src/plugins/contextmenu.ts

@@ -1,4 +1,4 @@
-import { Directive, App, createVNode, render, DirectiveBinding } from 'vue'
+import { Directive, createVNode, render, DirectiveBinding } from 'vue'
 import ContextmenuComponent from '@/components/Contextmenu/index.vue'
 
 const CTX_CONTEXTMENU_HANDLER = 'CTX_CONTEXTMENU_HANDLER'
@@ -53,8 +53,4 @@ const ContextmenuDirective: Directive = {
   },
 }
 
-export default {
-  install(app: App) {
-    app.directive('contextmenu', ContextmenuDirective)
-  }
-}
+export default ContextmenuDirective