Vue自定义v-has指令,做按钮权限判断的步骤

 更新时间:2021年04月25日 08:45:39   作者:OrzR3  
这篇文章主要介绍了Vue自定义v-has指令,做按钮权限判断的步骤,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

应用场景

以后台管理系统为例,每个用户所拥有的按钮权限不一样。管理员配置权限之后,用户登录时,从接口拿到按钮权限列表,然后根据后台数据判断显示哪些按钮。

简单说一下,自定义指令

Vue.js官网关于自定义指令的讲解

cn.vuejs.org/v2/guide/cu…

基础概念

Vue除了核心功能默认内置的指令(v-model和v-show)还可以注册自定义指令。

在Vue2.0中,代码复用和抽象的主要形式是组件。但有的情况下,仍需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。

譬如,自定义一个v-focus指令,当页面加载时,输入框将获得焦点

<input v-focus>

全局自定义

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部自定义

//如果想注册局部指令,组件中也接受一个 directives 的选项:
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

钩子函数

一个指令定义对象可以提供如下几个钩子函数(均为可选)

bind

只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted

被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)

update

所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated

指令所在组件的VNode及其子VNode全部更新后调用。

unbind

只调用一次,指令与元素解绑时调用。

其他

除此之外,还有一些基础概念,钩子函数参数,动态指令参数,等等。

cn.vuejs.org/v2/guide/cu…

官网讲的十分清楚,在此不再多做赘述。

原理

如果对自定义指令的源码感兴趣,也有一篇文章讲的很通透

//www.jb51.net/article/209716.htm

原理就是:

  • 解析Vue的属性的时候,遍历每个属性;
  • 对象上增加一个directives属性保存指令信息;
  • 渲染完成后会执行directives模块的create钩子函数;
  • Vue 编译生成的虚拟节点,也就是VNode插入到父节点后,
  • 依次执行每个函数,也就执行到我们自定义定义的inserted钩子函数了

自定义指令v-has

话休絮烦,言归正传。

今天主要是总结一下:自定义指令v-has,按钮权限判断

登录接口拿到按钮权限列表,存入本地缓存LOGIN_USER_BUTTON_AUTH中

数据格式如下:

[
    {
        "checked":false,
        "component":"",
        "createTime":"2019-06-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "icon":"",
        "id":"1503273153861066776",
        "name":"今日采集(案卷)",
        "open":"true",
        "parentId":"2328050996633395469",
        "parentName":"首页",
        "permission":"sys:index:vol",
        "sort":103,
        "status":"0",
        "type":"2",
        "updateTime":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "url":""
    }
]

自定义v-has指令的配置

在utils文件夹下,新建hasPermission.js文件,在index.js中统一导出

const hasPermission = {
    install (Vue, options) {
        Vue.directive('has', {
            inserted: (el, binding, vnode)=>{
                filterGlobalPermission(el, binding, vnode);
            }
        });
    }
};
/**
 * 全局权限控制
 */
export const filterGlobalPermission = (el, binding, vnode) => {
    let permissionList = [];
    let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");
    for (let auth of authList) {
        permissionList.push(auth);
    }
    if (!permissionList.length) {
        el.parentNode.removeChild(el);
        return;
    }
    let permissions = [];
    for (let item of permissionList) {
        permissions.push(item.permission);
    }
    if (!permissions.includes(binding.value)) {
        el.parentNode.removeChild(el);
    }
}
export default hasPermission;

utils文件下的index.js

utils文件夹下的其他js文件也可以统一在index.js里导出

import hasPermission from './hasPermission'
export { hasPermission }

main.js中引入

import { hasPermission } from '@/utils'
Vue.use(hasPermission)

组件中使用v-has根据按钮权限,判断是否显示该按钮

<el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">
    新增
</el-button>

以上就是Vue自定义v-has指令,做按钮权限判断的步骤的详细内容,更多关于Vue 自定义v-has指令的资料请关注脚本之家其它相关文章!

相关文章

  • vue 实现用户登录方式的切换功能

    vue 实现用户登录方式的切换功能

    这篇文章主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 图文详解vue中proto文件的函数调用

    图文详解vue中proto文件的函数调用

    这篇文章主要给大家介绍了vue中proto文件函数调用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-08-08
  • Vue内容分发slot(全面解析)

    Vue内容分发slot(全面解析)

    下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue 路由视图 router-view嵌套跳转的实现

    vue 路由视图 router-view嵌套跳转的实现

    这篇文章主要介绍了vue 路由视图 router-view嵌套跳转,主要实现的内容有制作一个登录页面,跳转到首页,首页包含菜单栏、顶部导航栏、主体,标准的后台网页格式,菜单点击显示不同的页面,感兴趣的小伙伴请参考下面文章内容
    2021-09-09
  • 详解vue项目中如何引入全局sass/less变量、function、mixin

    详解vue项目中如何引入全局sass/less变量、function、mixin

    这篇文章主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 详解Vue项目中实现锚点定位

    详解Vue项目中实现锚点定位

    这篇文章主要介绍了Vue项目中实现锚点定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue3中使用v-model实现父子组件数据同步的三种方案

    vue3中使用v-model实现父子组件数据同步的三种方案

    这篇文章主要介绍了vue3中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue3中getCurrentInstance获取组件实例踩坑详细记录

    vue3中getCurrentInstance获取组件实例踩坑详细记录

    getCurrentInstance()是Vue.js3 Composition API中的一个函数,它的作用是获取当前组件的实例对象,下面这篇文章主要给大家介绍了关于vue3中getCurrentInstance获取组件踩坑的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue中map()快速使用方法小结

    vue中map()快速使用方法小结

    map()函数是在JS的数组中定义的,它返回一个新的数组,下面这篇文章主要给大家介绍了关于vue中map()快速使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue+video.js实现视频播放列表

    vue+video.js实现视频播放列表

    这篇文章主要为大家详细介绍了vue+video.js实现视频播放列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论