使用自定义指令el.parentNode为null

在后台管理系统中，我们常常除了动态菜单的权限还需要控制按钮的权限

一般我们是通过当前登录的用户这个角色有哪些权限，如果没有该按钮的权限就隐藏，也就是说通过按钮的显示隐藏来做权限控制（例如：a没有某个页面的增删改的权限，只有查询权限，那么增删改的按钮就不会显示）

我们常常会写自定义指令来实现这个功能

首先新建一个plugin的文件夹（这是我用来写全局自定义指令，混入，过滤器的文件夹，你们自己看情况）

//main.js引用
//全局使用自定义插件
import plugin from '@/plugin'
Vue.use(plugin)

//plugin/index
import registerFilters from './filter'
import registerMixins from './mixin'
import registerDirective from './directive'export default {install(Vue){registerMixins(Vue)registerFilters(Vue)registerDirective(Vue)}
}

别的就不看了，直接来看指令（之前写法）

//plugin/directive
import Vue from "vue"
let directives = {hasPermi(el, binding, vnode) {const { value } = binding//从缓存拿到按钮权限数组（也有放在vuex里面的）let permissions = Vue.ls.get("userInfo").permissionslet hasPermissions = permissions.some(item => value.includes(item))if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}}
}export default function registerDirective(Vue) {Object.keys(directives).forEach(key => {Vue.directive(key, directives[key])})
}

然后在页面中使用

<a-buttontype="primary"@click="handleAdd"icon="plus"v-hasPermi="['acl:menu:add']">新增</a-button>

然后在菜单管理中把这个权限取消，发现这个按钮只是有时候消失，这显然不对
排查代码打印发现也没有问题，然后也走到if (!hasPermissions)这个判断里了，那显然就是没有删除掉这个标签，打印el.parentNode发现竟然是null

有问题找百度
原来是钩子函数的问题

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

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

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

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

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

unbind：只调用一次，指令与元素解绑时调用。

后来做了改动，使用inserted成功了

//plugin/directive
import Vue from "vue"
let directives = {hasPermi: {inserted: function (el, binding, vnode) {const { value } = bindinglet permissions = Vue.ls.get("userInfo").permissionslet hasPermissions = permissions.some(item => value.includes(item))if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}}}
}export default function registerDirective(Vue) {Object.keys(directives).forEach(key => {Vue.directive(key, directives[key])})
}

使用自定义指令el.parentNode为null相关推荐

【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods）
参考网址: (适用vue2)让element-ui的输入框聚焦的4种方式 ElementUI:使input自动聚焦的两种方法使el-form中的el-input自动获取焦点在vue3中,保留了自定 ...
vue-cli 自定义指令directive 添加验证滑块
欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640 ---------------------------------------------------------- ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
vue 自定义指令_vue 自定义指令
<template><div><div class="movebox"><div class="movego"> ...
vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
vue点击改变data值_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
vue自定义指令截取图片中心显示
使用vue做项目时,有一种产品需求,是像朋友圈一样展示图片,在小图时,只展示中心的一部分图片在vue中可以用自定义指令来做页面代码 <div class="image-item&q ...
vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

使用自定义指令el.parentNode为null

使用自定义指令el.parentNode为null相关推荐

最新文章

热门文章