Vue自定义指令

vue.js 中除了常用的 v-model 和 v-if 这种常用的指令外，有一些需求还是需要自定义指令的，首先还是先放上官网介绍

权限控制的自定义指令

自定义指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 页面权限点
permission: {
  inserted(el, binding, vnode) {
    const { arg } = binding;
    const {
      context: {
        $route: { name },
        $store: { state }
      }
    } = vnode;
    const handler = () => {
      const { authPoints } = state.app;
      if (!authPoints) return setTimeout(handler, 50);
      !(authPoints[name] || []).includes(arg) && el.parentNode.removeChild(el);
    };
    handler();
  }
},

页面使用

1
<el-button type='text' v-permission:edit >编辑</el-button>
前端开发
js vue.js

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！