关于前端:directives在vue中的应用

directives

• 类型：Object
• vue3 中自定义指令的办法

directives 的应用办法

在组件中应用

<tempalte>

</template>
export default {data() {return {};
    },
    directives:{'local-test':function(el,binding,vnode){
            /** el 能够获取以后 dom 节点，并且进行编译，也能够操作事件 **/
            /** binding 指的是一个对象，个别不必 **/
            /** vnode 是 Vue 编译生成的虚构节点 **/
            el.style.border="1px solid red";  // 操作 style 所有款式
            console.log(el.value);  // 获取 v -model 的值
            console.log(el.dataset.name) //data-name 绑定的值，须要 el.dataset 来获取
            console.log(vnode.context.$route); // 获取以后路由信息
        }
    },
    components:{ },
    filters:{},}

自定义指令在全局中的利用

钩子函数的参数

• el：指令所绑定的元素，能够用来间接操作 DOM。

• binding：一个对象，蕴含以下 property：

  • name：指令名，不包含 v-前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否扭转都可用。
  • expression：字符串模式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 1 + 1。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个蕴含修饰符的对象。例如v-my-directive.foo.bar 中，修饰符对象为 {foo: true, bar: true}。
• vnode：Vue 编译生成的虚构节点。
• oldVnode：上一个虚构节点，仅在 update 和 componentUpdated 钩子中可用

自定义指令在全局的利用，写一个 v-has-permissions 指令管制按钮的显示

<template>
 <Button type="primary" @click="changedatabaseModel" v-has-permissions="['admin','a']"> 增加用户 </Button>
</tempalte>

//haspermissions.js，该文件需在 main.js 引入能力在全局应用
import Vue from 'vue'
import storage from '@/js/helper/storage';
Vue.directive('has-permissions',function(el,binding,vnode){
  let permissions = binding.value
  const currentUserPerms = storage.get('GAUSS').split(',');
  if(permissions){
    let isShow = permissions.every(item=>{return currentUserPerms.includes(item)
    })
    if(!isShow){el && el.parentElement && el.parentElement.removeChild(el)
    }
  }
})

• 通过权限管制按钮的显示，上面通过路由配置权限 的例子不太适合，但仅作为一种思维的传播

//router.js 通过 meta 中的 permissions 配置页面须要权限
{
  path: "/user-manage",
  name: "userManage",
  component: Layout,
  redirect: {name: "UserManage"},
  meta: {
    title: "XXX 治理",
    publicPage: true 
  },
  children: [
    {
      path: "/",
      name: "UserManage",
      meta: {
        title: "用户治理",
        childMenu: 'databaseMenu',
        publicPage: true ,
        permissions: ['admin','user_edit']
      },
      component: () =>
        import("@/view/user/index.vue")
    },
  ]
}

在组件中的配置一个 v-has 的指令

<template>
    <Button type="primary" @click="changedatabaseModel" v-has> 增加用户 </Button>
</tempalte>
<script>
export default{data(){return{}
    },
    directives: {'has'(el,binding,vnode){let { permissions} = vnode.context.$route.meta
          const currentUserPerms = storage.get('GAUSS').split(',');
          if(permissions){
            let isShow = permissions.every(item=>{return currentUserPerms.includes(item)
            })
            if(!isShow){el && el.parentElement && el.parentElement.removeChild(el)
            }
        }
    }
  },
}
</script>