Vue项目 v-has权限教程-解决v-has与v-if的冲突问题

最新推荐文章于 2024-05-14 17:48:03 发布

CCT丶Blue

最新推荐文章于 2024-05-14 17:48:03 发布

阅读量2.5k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CCC_chtt/article/details/131514652

版权

NO1：通俗易懂的v-has的教程

如今市面上项目越来越多，项目的功能也越来越花哨。对于公司里的大型项目来说，权限功能肯定是必不可少的。如果哪些小伙伴对于权限设置还不是很理解，对于自定义指令还差点意思，如下这篇介绍可帮大家一劳永逸！

1. 创建自定义指令v-has

（1）新建directives文件夹，在里面新建index.js，废话不多说，代码及注释呈上：

const directive = Vue => {
//自定义has的名称
    Vue.directive('has', {
         //指令绑定到的元素。这可以用于直接操作 DOM。
        update: function (el, binding) {
            if (!powerBtn(binding.value)) {
                if (el.parentNode) {
                //如果父节点没有此属性，移除
                    el.parentNode.removeChild(el);
                }
            }
        }
    });
}

在这里对几个钩子进行解释：（执行顺序由上到下）

bind 第一次绑定到元素时调用。
inserted 被绑定元素插入父节点时调用。
update 数据更新时调用。
componentUpdated 指令所在组件的 VNode 加上+子 VNode 全部更新后调用。
unbind 指令与元素解绑时调用（只调用一次）。

钩子里都会有如下参数:

el:指令绑定到的元素。这可以用于直接操作 DOM。
binding:对象属性，包括如下属性（除第一个外，其余应用较少）
value：传给指令的值
oldValue：旧值
instance：组件实例
dir：指令的对象
vnode:绑定元素的底层 VNode。
prevNode:绑定元素的 VNode(仅在 updated 和 beforeUpdated中应用)

（2）设置powerBtn函数(前提当然要导入你的仓库模块哈)

function powerBtn(value) {
    if (store.state.powerBtn.btnPower.length) {
        return store.state.powerBtn.flag[value];
    }
    return true;
}

2.设置代码仓库

（1）首先规范所需的权限分配，该代码中的’initStatus’为后端返回的0/1，0就代表着禁用，1就代表着展示

const powerBtn = {
    state: {
        // 按钮控制
        btnPower: [],
        //  页面中所有的按钮进行权限的分配
        flag: {
        //例如：添加按钮需要设置权限
            add: true,
        }
       },
       mutations: {
        //  权限菜单的数据
        btnPowers(state, payload) {
            payload.forEach((item) => {
                if (item.initStatus == 0) {
                    state.flag[item.btnId] = false;
                }
            })
            state.btnPower = payload;
            }
    	},
}

3.接口获取权限

（1）这一步就很简单了，找后端伙伴要一个接口，在页面加载的时候触发，并往仓库里传值

this.$store.commit('btnPowers', res.data);

4.导出自定义方法名

（1）在main.js中导出自定义的has函数名

import directive from “./directives”;

（2）全局注册

directive(Vue);

5.最后在页面引用此指令

 <el-button v-has="add" plain size="small" icon="el-icon-plus">新增</el-button>

NO2：解决v-has与v-if的冲突

此模块主要是帮助了向大家区分v-if与v-has。最近在项目中遇到一个bug，具体表现为：在设置按钮权限后，刷新页面，设置权限的按钮有时会展示，有时不会，可以说是时好时坏。在我百度一会后，发现并没有具体的解释说明和解决办法，就开始自己钻研代码，最终总结为v-if 与v-has的冲突。
该情况主要表现为：在一个表格中，table数据无法深层次渲染，在加载过程中，无法对v-if和v-has进行先后顺序判定。导致渲染失败。

  <el-table :data="tableData" stripe ref="table" row-key="id" v-if='tableData.length'>
        <el-table-column label="操作" fixed="right">
               <template slot-scope="scope">
                 <el-button type="primary" size="medium" v-has="add">添加</el-button>
               </template>
        </el-table-column>
  </el-table>