vue 通过指令为按钮分配权限

woowen！

已于 2022-06-05 22:31:09 修改

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue.js vue.directive install

于 2022-04-29 14:32:52 首次发布

本文链接：https://blog.csdn.net/q1ngqingsky/article/details/123839938

版权

本文介绍了如何在Vue后台运营平台中解决按钮权限问题，通过注册全局自定义指令`v-permission`，结合`install`方法和`vue-directive`技术，实现类似于`v-if`和`v-show`的效果来控制DOM元素的显示与隐藏。权限数据可以存储在Vuex中，或者在路由的meta信息中。提供两种不同的实现方案，并附有相关阅读链接。

摘要由CSDN通过智能技术生成

思路

新建utils/permission.js

在main.js 文件中导入

使用举例

思路

在一些后台运营平台中，经常会有按钮权限的问题！

可以通过Vue.directive注册一个全局自定义指令解决问题

这里涉及到的技术点：

1.install 方法

2.vue-directive

通过操作dom，控制dom的显隐。

实现v-if的效果: el.parentNode.removeChild(el)
实现v-show的效果:el.style.display = ‘none’

新建utils/permission.js

//按钮权限是保存在vuex中

import Vue from 'vue'
import store from '../store'

let PermissionPlugin = {};
PermissionPlugin.install =

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

woowen！

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

iView admin2.0动态路由按钮级权限实现

04-30

2. **权限判断**：在获取的权限数据中，为每个按钮或操作分配对应的权限标识。在组件模板中，使用 `v-if` 或 `v-show` 检查用户是否拥有执行该操作的权限。 3. **更新界面**：当权限发生变化时，例如用户切换角色，...

Vue自定义指令

me_never的博客

10-03

562

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 如果想注册局部指令，组件中也接受一个 directives 的选项： directives: { focus: { ...

参与评论您还未登录，请先登录后发表或查看评论

删除html元素

weixin_34174322的博客

09-18

161

如果需要将id是‘div2js’的div元素删除。 1.使用DOM对象首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。 var el = document.getElementById('div2js'); el.parentNode.removeChild(el); 2.使用JQuery 直接找到并删除。 $('#div2js'...

vue中 $destroy 并且 removeChild 组件数据响失效

舜岳的博客

01-07

6008

this.$destroy() 作用: 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和destroyed 的钩子。当销毁一个组件时我们有可能会用这种方法： this.$destroy() this.$el.parentNode.removeChild(this.$el) //通过父级元素销毁当前组件查看页面html该组件确实被销毁，但是removeChild销毁组件只是表面上的销毁了该组件，实际上该组件函数任然缓存在vue中，下次组件显

removeNode(e)与e.parentNode.removeChild(e)

吃瓜群众的博客

10-09

8962

一、appendNode在IE和FIREFOX下都能正常使用，但是removeNode只能在IE下用。removeNode方法的功能是删除一个节点，语法为node.removeNode(false)或者node.removeNode(true)，返回值是被删除的节点。removeNode(false)表示仅仅删除指定节点，然后这个节点的原孩子节点提升为原双亲节点的孩子节点。removeNode(f

vue中使用自定义指令实现按钮权限展示问题

蜗牛~~

04-28

1790

一、在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-d

基于Vue实现后台系统权限控制的示例代码

08-29

按钮权限控制与菜单权限控制的实现思路类似，也是根据用户权限判断各个按钮的显示与否，方式无非是v-if或自定义指令。伪码： ``` Vue.directive('has', { bind: function (el, binding) { if (!has(binding....

vue2-router-permissions.zip

08-12

在Vue2-router-permissions.zip这个压缩包中，我们很可能会找到一个关于如何在Vue2项目中实现页面级别的权限分配的示例。权限分配是许多企业级应用的关键功能，它确保用户只能访问他们被授权看到的页面或功能。Vue...

基于 Vue + Element 实现的权限管理系统

11-08

3. **指令系统**：Vue 的指令如 `v-if` 和 `v-for` 用于条件渲染和循环遍历，可以用来根据用户权限显示或隐藏特定的界面元素。 4. **路由管理**：Vue Router 是Vue的官方路由管理器，它允许我们定义页面间的导航，...

vue 插件

qq_42451776的博客

07-13

124

1.新建一个mixins文件夹 import Vue from "vue" import * as filters from "./filters" import * as directives from "./directives" import wxjButton from "./components/wxjButton/index.vue" let show = () => console.log("show") // 原型绑定属性或方法 Vue.prototype.$show = sho

vue权限管理---按钮权限如何写？

最新发布

qq_18932003的博客

02-28

986

----------------------------------------------------------------------------------------- 重要。如下图，有两个按钮，一个编辑按钮，一个删除按钮，但是一句上面返回的权限，只有删除权限，按照下图的代码，那么此时，我们在页面上应该可以看到编辑按钮是被禁用的，删除按钮时可用的。如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面，如果用户已经登录，可是手动敲入非权限内的地址，则需要跳转到404界面。

Web前端之UniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map

CSDN博客主页地址：https://mengjian.blog.csdn.net/

05-16

2143

Web前端之UniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map

vue移除当前元素（自定义指令相关）

qq_45847565的博客

02-22

4358

本文是昨日后续：查了一下怎么删除当前元素，也就是把dom也移除，方法很简单，代码如下： if (!hasPer) { // el.style.display = "none"; el.parentNode.removeChild(el); } 验证： //这是源代码 <div class="title_box"> <div class="text">工作区列表<span class="gray"> · {{datasetCount}

vue 自定义指令

sinat_39598192的博客

05-04

208

为什么要自定义指令 //创建方式1：全局 vue.directive('directName',{}) //创建方式2：组件内 directives: { directName: { // 钩子 } } //使用方式1：在模板中使用 <div v-directName></div> //使用方式2：jsx语法中 export default{ name:'app', render(){ return ( <div id="app">

Vue 自定义指令可以实现哪些有用的功能

太空编程

08-10

721

Vue 有一些很实用的指令v-showv-ifv-textv-htmlv-bindv-on可以帮助我们实现很复杂的功能，同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景：控制页面元素显示与隐藏，可用作控制权限功能页面元素点击事件防抖与节流通过自定义指令控制图片懒加载针对页面特定元素添加自定义行为对输入内容进行过...

查询父节点parentNode

dianlu5775的博客

07-11

144

示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> <html> <head> ...

parentNode 与 parentElement

kfepiza的博客

04-27

872

html元素的 parentNode 是 document。html元素的 parentElement 是 null。

二看 Vue

wukeyan的博客

11-02

350

vue的{{ }} {{}} 与 react 的 jsx 差不多，里面写的是 js 表达式可以直接获取 Date.now(), 变量 .toUpperCase() 等等。 v-bind简写:，给属性绑定值，单向数据绑定，从 data 流向页面例如点我跳转这里的 url 就是在 data 中定义的变量，所以此时" "里面写的是 js 表达式，不是寻常字符串。 v-model给属性绑定值，双向绑定数据不仅能从 data 流向页面，也能从页面流向 data，它一般只能运用在表单类元素上，像 input，s

vue 销毁组件、重置组件方式

Decline1的博客

05-26

6499

1.使用v-if 在组件上定义v-if一个布尔变量　　1.变量改为false 　　2.变量改为true import dialog from '@compintent/dialog' components: {dialog} this.$destroy('dialog'); // get~ 销毁组件 destroyElement() { this.$destroy(true); this.$el.parentNode.removeChild(this.$el); }, .

Vue自定义指令实现按钮权限控制详解

逻辑卷映射服务器是将逻辑卷分配给特定服务器的过程，这通常包括映射逻辑卷到服务器并确保服务器能够识别这些卷。持续数据保护是DELL Compellent的一个重要特性，它提供数据即时回放功能，允许创建和应用Replay模板...