指令配置

lch-coder · lch-coder · commit 305751f12336 · 2023-03-06T21:31:37.000+08:00
diff --git a/src/directives/focus.ts b/src/directives/focus.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue'
+
+/**
+ * 聚焦
+ */
+export default function setupFocusDirective(app: App) {
+  app.directive('focus', {
+    mounted(el: HTMLElement) {
+      // 聚焦元素
+      el.focus()
+    },
+  })
+}
diff --git a/src/directives/index.ts b/src/directives/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+
+import setupPermissionDirective from './permission'
+import setupFocusDirective from './focus'
+
+/** setup custom vue directives. - [安装自定义的vue指令] */
+export function setupDirectives(app: App) {
+  setupPermissionDirective(app)
+  setupFocusDirective(app)
+}
diff --git a/src/directives/permission.ts b/src/directives/permission.ts
@@ -0,0 +1,27 @@
+/*按钮权限校验*/
+import { App, DirectiveBinding } from 'vue'
+
+//权限检查方法
+const hasPermission = function (value: string) {
+  const permissionList: string[] = ['edit', 'delete']
+  return permissionList.includes(value)
+}
+
+const permissionDirective = function (el: HTMLElement, binding: DirectiveBinding) {
+  if (!binding.value) {
+    throw new Error('v-permission need value')
+  }
+  if (binding.value !== binding.oldValue && !hasPermission(binding.value)) {
+    el?.parentNode?.removeChild(el) /*删除节点*/
+  }
+}
+
+/**
+ * 权限指令
+ */
+export default function setupPermissionDirective(app: App) {
+  app.directive('permission', {
+    mounted: permissionDirective,
+    updated: permissionDirective,
+  })
+}
diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { setupStore } from './store'
 import { setupRouter } from './router'
+import { setupDirectives } from './directives'
 import { setupEcharts } from '@/utils/echarts'
 import VueGridLayout from 'vue-grid-layout'
 
@@ -31,6 +32,9 @@ async function setupApp() {
   // vue router
   await setupRouter(app)
 
+  // vue directives
+  setupDirectives(app)
+
   // echarts
   setupEcharts(app)
 
