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

应用场景

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

简单说一下,自定义指令

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指令的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue自定义v-has指令实现按钮权限判断

    应用场景 以后台管理系统为例,每个用户所拥有的按钮权限不一样.管理员配置权限之后,用户登录时,从接口拿到按钮权限列表,然后根据后台数据判断显示哪些按钮. 简单说一下,自定义指令 Vue.js官网关于自定义指令的讲解 cn.vuejs.org/v2/guide/cu- 基础概念 Vue除了核心功能默认内置的指令(v-model和v-show)还可以注册自定义指令. 在Vue2.0中,代码复用和抽象的主要形式是组件.但有的情况下,仍需要对普通DOM元素进行底层操作,这时候就会用到自定义指令. 譬如,

  • 详解Vue自定义指令及使用

    一.什么是指令 学习 vue 的时候肯定会接触指令,那么什么是指令呢? 在 vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性 <div v-xxx ></div> 比如在 angular 中 以 ng-xxx 开头的就叫做指令 指令中封装了一些 DOM 行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,会进行相关 DOM 操作的绑定,即可以进行一些模板的操作 vue 中常用的一些内置 v- 指令 v-t

  • Vue基本指令实例图文讲解

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 一. v-on指令 1. 基础用法 v-on是事件监听的指令, 下面来看简单用法 <!DOCTYPE html> <html lang="en"&

  • vue3.0自定义指令(drectives)知识点总结

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

  • 如何使用vue自定义指令构建拖放插件

    我们都知道html5的拖放特性,利用它可以很方便的实现拖拽和放置功能,比如一些选择类操作的使用场景,让用户去拖拽比鼠标点击更容易接受和理解.今天我们就利用这一特性,结合vue的自定义指令,来实现一个简单但是实用的拖放插件. 为什么叫它插件?因为我们的目标不是开发一个vue组件,而是两个vue的自定义指令,并且最终会把这两个自定义指令封装到一个es6的class里,在实际项目中引入就可以很方便的使用了. 大部分的拖放使用场景都是把一些待选元素从A区域拖放到B区域.这里就涉及到两个概念,一个是可拖拽

  • Vue.js源码分析之自定义指令详解

    前言 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指

  • Vue实现指令式动态追加小球动画组件的步骤

    1. 小球组件 我们希望可以封装一个通用的小球动画组件,这个组件可以在任何地方调动,而且小球组件可以通过this.$ball({...props})这样的方式调用,让他在用法上接近element-ui template模板 <template> <div class="ball-wrapper"> <transition @before-enter="beforeEnter" @enter="enter" @afte

  • vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

    vue项目开发的过程中,如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话,可以封装一个自定义的指令. 方法一. 组件内代码如下: directives: { title: { inserted(el) { const { clientWidth, scrollWidth, title } = el; if (!title && scrollWidth > clientWidth) el.title = el.innerText; } } }, 使用: <artic

  • Vue 3自定义指令开发的相关总结

    什么是指令(directive) 在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为"指令". 在计算机技术中,指令是由指令集架构定义的单个的CPU操作.在更广泛的意义上,"指令"可以是任何可执行程序的元素的表述,例如字节码. 那么在前端框架Vue中"指令"到底是什么,他有什么作用呢? 在Vue开发中我们在模板中经常会使用v-model和v-show等以v-开头的关键字,这些关键字就是Vue框架内置的指令

  • 8个非常实用的Vue自定义指令

    本文在github做了收录 github.com/Michael-lzg- demo源码地址 github.com/Michael-lzg- 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令.它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作. Vue 自定义指令有全局注册和局部注册两种方式.先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令.然后

随机推荐