按钮自定义指令

src/demo/diretive-demo.vue

@@ -4,7 +4,9 @@
     <input type="text" v-focus="'120'" />
     <p v-height="'100'"></p>
     <p v-myText:bar.stop="obj">p标签</p>
-
+    <el-button v-auth="'btnAuth1'">按钮权限</el-button>
+    <el-button v-auth="['edit','btnAuth1']">按钮权限arr/err</el-button>
+    <el-button v-auth="['btnAuth1','btnAuth2']">按钮权限arr/success</el-button>
   </div>
 </template>
 
@@ -18,14 +20,10 @@ const obj = ref({
 // 自定义指令
 const vFocus = {
   mounted(el: HTMLElement, binding: any) {
-    console.log(el,'el');
-    console.log(binding,'binding');
     
     el.focus()
     el.classList.add('my-height')
     el.style.color = 'red'
-    // console.log(el.attributes
-    // ,'el.attributes');
     el.setAttribute('value','我是value')
   }
 }

src/directive/index.ts

@@ -1,11 +1,12 @@
 import type {App, Directive} from 'vue'
 import myText from "./modules/text";
 import height from "./modules/height";
-
+import auth from './modules/auth';
 
 const directiveList: {[key:string] : Directive} = {
     myText,
-    height
+    height,
+    auth
 }
 
 const directives = {

src/directive/modules/auth.ts

@@ -0,0 +1,15 @@
+import type { Directive,DirectiveBinding } from 'vue'
+
+const btnAuthList = ['btnAuth1', 'btnAuth2', 'btnAuth3']
+const auth: Directive = {
+    mounted(el:HTMLElement, binding:DirectiveBinding) {
+        const { value } = binding;
+        if(Array.isArray(value) && value.length) {
+            value.forEach(item => btnAuthList.includes(item) || el.remove())
+        } else {
+            btnAuthList.includes(value) || el.remove();
+        }
+    }
+}
+
+export default auth;

src/directive/modules/height.ts

@@ -1,15 +1,12 @@
-import type { Directive,DirectiveBinding } from 'vue'
 
+import type { Directive,DirectiveBinding } from 'vue'
 const height:Directive =  {
-    mounted(el:HTMLElement, binding:DirectiveBinding, vnode, preVnode) {
-       console.log('123');
-       console.log(binding, 'binding11111111');
-
-    el.style.height = binding.value + 'px'
-    el.style.width = binding.value + 'px'
-    el.innerText = binding.value + 'px'
-    el.style.border = 'dashed red' 
+   mounted(el:HTMLElement, binding:DirectiveBinding, vnode, preVnode) {
+      el.style.width = binding.value + 'px'
+      el.innerText = binding.value + 'px'
+      el.style.height = binding.value + 'px'
+      el.style.border = 'dashed red' 
    }  
 }
 
-export default height;
+export default height;

src/directive/modules/text.ts

@@ -1,15 +1,11 @@
 import type { Directive,DirectiveBinding } from 'vue'
 
 const myText:Directive =  {
-    mounted(el:HTMLElement, binding:DirectiveBinding, vnode, preVnode) {
-    console.log(binding, 'binding');
-   //  console.log(vnode, 'vnode');
-   //  console.log(preVnode, 'preVnode');
-
+    mounted(el:HTMLElement, binding:DirectiveBinding) {
    //  el.style.height = binding.value + 'px'
    //  el.innerText = binding.value + 'px' 
-    el.innerText = binding.value ? binding.value.name.split('').reverse().join('') : '无法识别';
-       }  
+   el.innerText = binding.value ? binding.value.name.split('').reverse().join('') : '无法识别';
+   }  
 }
 
    export default myText;

src/main.ts

@@ -17,7 +17,6 @@ import directives from '@/directive/index'
 
 
 const app = createApp(App)
-
 // 注册全局指令
 app.use(directives)