Vue自定义指令使用——按钮级别权限控制

简单的Vue自定义指令

vue.js官网自定义指令
scss官网（推荐学习样式，搭配vue写起来真的很爽很省事，还给小白一种高大上的感觉，哈哈哈哈~）

key：自定义指令 scss 的 @each in

需求说明：

我接到的需求是，通过配置后台，配置每个页面的的按钮展示，配置成功的则展示按钮，不成功或者未配置的则不展示。不过，在开发中要注意：
1.未配置按钮时，默认展示还是隐藏（跟产品确认后，选择了默认隐藏）。
2.注意样式调整，有些按钮的展示隐藏会影响布局。
这种需求已经很常见了，也依赖数据结构，下面的demo教你怎么思考。

思考：

按钮权限也可以通过v-if控制，但如果页面过多，每个页面都需要引入判断依据，进行判断，不如指令简洁，按钮加上指令即可；也不如指令方便修改，修改指令js即可。
***： 通过后端返回的按钮权限列表，判断当前按钮是否具有permission权限，有则显示，无则移除节点。

以下采用了自己的demo项目，没有用到实际开发项目，只是决定按钮的显示影藏，数据什么都是写死的，但思路是灵活的，看懂就好。

1.route.js文件中配置路由：

2.封装指令：
在utils文件夹下新建个button-check的js文件

import Vue from "vue";

// 在开发中,buttonList的相关数据都是后端给的
// 这里为了省事，直接写成了我所需要的数据格式,
// 你们需要根据后端返回的数据进行提取或直接使用,
// 使用了name标识,但建议用btn-code作为唯一标识，像id一样.

const buttonList = [
  { name: "btn-1", permission: true }, // permission控制展示隐藏
  { name: "btn-2", permission: false },
  { name: "btn-3", permission: true },
  { name: "btn-4", permission: false },
  { name: "btn-5", permission: true },
  { name: "btn-6", permission: false },
  { name: "btn-7", permission: true },
  { name: "btn-8", permission: false }
]

/**
 * 判断按钮是否有权显示
 * @param name
 * @returns {boolean}
 */
function isButtomShow(buttonList, name){
 // 根据name匹配唯一
  return buttonList.some(v => v.name && v.name === name && v.permission)
}

// 按钮存在且为true,则显示

Vue.directive('button-check',{
  inserted(el, binding, vnode) {
    const name = binding.value; // 接受指令传入的值
    if(!isButtomShow(buttonList, name)){
      el.parentNode.removeChild(el); // 移除节点
    }
  }
})

3.在main引入：

4.使用指令：

<template>
  <div class="container">
    <div v-for="(btn,idx) in btns" :key="idx" class="btn">
      <!-- 传入了btn.name,将会在button-check中通过指令参数value获取到 -->
      <el-button v-button-check="btn.name" :class="btn.className">{{btn.name}}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      btns: [
        { name: "btn-1",className: "btn-1" },
        { name: "btn-2",className: "btn-2" },
        { name: "btn-3",className: "btn-3" },
        { name: "btn-4",className: "btn-4" },
        { name: "btn-5",className: "btn-5" },
        { name: "btn-6",className: "btn-6" },
        { name: "btn-7",className: "btn-7" },
        { name: "btn-8",className: "btn-8" }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/common";
.btn {
  > button {
    margin-bottom: 10px;
  }

  @each $num, $color, $cursor in  
    (1, #333, default),
    (2, #333, pointer), 
    (3, #333, move),
    (4, #333, default),
    (5, #333, pointer), 
    (6, #333, move),
    (7, #333, default),
    (8, #333, pointer),
  {
    .btn-#{$num} {
      background: $color;
      cursor: $cursor;
      color:#fff;
      &:hover{
        color:#b6986d;
      }
    }
    
  }
}
</style>

5.效果：

Vue自定义指令实现按钮级权限控制功能
这是一篇差不多的文章，他在router中配置了权限，而我直接略过数据的处理给了最直接的假数据，由于在正式项目中，我按钮权限信息都是后端返回的，不仅返回按钮权限还控制了对应账号的菜单权限，处理完原始数据也就是得到我上面用的假数据，一句话，万变不离其宗~

实在不懂的，copy这份代码运行看看，当然也欢迎大家指错，一起进步！
转载请带上链接，谢谢~