directives在vue中的应用

马翠玲

directives


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:{
    },
}
自定义指令在全局中的应用
钩子函数的参数

image

  • el:指令所绑定的元素,可以用来直接操作 DOM。
  • binding:一个对象,包含以下 property

    • name:指令名,不包括 v-前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • 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:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用

自定义指令在全局的应用,写一个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>
阅读 90
0 声望
0 粉丝
0 条评论
你知道吗?

0 声望
0 粉丝
宣传栏