vue使用自定义指令实现按钮权限展示功能

目录
  • 一、在src下新建directive文件夹
  • 二、定义index.js文件，在vue上注入自定义指令
  • 三、编写自定义指令
  • 四、使用

一、在src下新建directive文件夹

二、定义index.js文件，在vue上注入自定义指令

import hasBtn from './permission/hasBtn'
const install = function (Vue) {
      Vue.directive('hasBtn', hasBtn)
}
if (window.Vue) {
      window['hasBtn'] = hasBtn
      Vue.use(install); // eslint-disable-line
}
export default install

三、编写自定义指令

hasBtn.js文件

/**
 * 设置操作权限标识符
 */
export default {
      inserted(el, binding, vnode) {
            /** 从binding中获取dom元素的value值 */
            const { value } = binding
            /** 存放value值 */
            const btn_permission = value;
            /** 拿到所有具备权限按钮的集合，通过传入的按钮id进行匹配 */
            const permissions = JSON.parse(sessionStorage.getItem('btnarr'))
            /** 利用some查询，只要有一个元素满足条件就返回true，全部不满足返回false */
            var hasPermissions = permissions.some(permission => {
                  return btn_permission == permission.menuId
            })
            /** 传入的按钮id不存在集合里面就移除该节点 */
            if (!hasPermissions) {
                  el.parentNode && el.parentNode.removeChild(el)
            }
      }
}

四、使用

例如在一个vue页面里面的一个新增按钮加上v-hasBtn属性

<el-button  v-hasBtn="15" type="primary" icon="el-icon-plus" size="mini" @click="addRelease">新增</el-button>

直接传入该按钮的id，即 v-hasBtn="15"，vue的自定义指令都是用v-开头即可，此时就可以触发自定义指令定义的函数，达到按钮权限可控的目的。

到此这篇关于vue中使用自定义指令实现按钮权限展示问题的文章就介绍到这了,更多相关vue自定义指令按钮权限展示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • vue自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-element-admin作为模板,该项目地址:Github | Vue-element-admin. 在Vue-element-admin模板项目的src/permission.js文件中,给出了路由守卫.加载动态路由的实现方案,在实现了基于不同角色加载动态路由的功能.我们只需要稍作改动,就能将基于角色加

  • vue使用自定义指令实现按钮权限展示功能

    vue使用自定义指令实现按钮权限展示功能

    目录 一.在src下新建directive文件夹 二.定义index.js文件,在vue上注入自定义指令 三.编写自定义指令 四.使用 一.在src下新建directive文件夹 二.定义index.js文件,在vue上注入自定义指令 import hasBtn from './permission/hasBtn' const install = function (Vue) { Vue.directive('hasBtn', hasBtn) } if (window.Vue) { window

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

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

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

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

  • 详解Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色. 在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下面

  • vue 使用自定义指令实现表单校验的方法

    笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析 在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,

  • vue中自定义指令directive的详细指南

    目录 一. 什么是自定义指令 二. 如何自定义指令 钩子函数 三.应用场景 输入框防抖 图片懒加载 一键 Copy的功能 拖拽 总结 一. 什么是自定义指令 我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 指令使用的几种方式: //会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中 `v

  • vue中自定义指令（directive）的基本使用方法

    vue中自定义指令（directive）的基本使用方法

    目录 前言 正文 1.全局注册 2.局部注册 3.钩子函数及参数设置 4.灵活用法 (1)动态指令参数 (2)函数简写方式 (3)对象字面量方式 5.使用场景 写在最后 前言 在vue项目中我们经常使用到 v-show ,v-if,v-for等内置的指令,除此之外vue还提供了非常方便的自定义指令,供我们对普通的dom元素进行底层的操作.使我们的日常开发变得更加方便快捷.本文就来总结一下自定义指令的使用方法及常用的场景. 正文 1.全局注册 这里全局注册一个指令,用于使用该指令的元素加一个红色边

  • vue 中自定义指令改变data中的值

    通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e

  • Vue.js自定义指令的用法与实例解析

    Vue.js自定义指令的用法与实例解析

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义

随机推荐