uni-app跨端自定义指令实现按钮权限_uniapp 自定义指令

前言

初看这个标题可能很迷，uni-app明明不支持自定义指令，这文章是在搞笑吗，本文对于uni-app自定义指令实现按钮权限的方式也有可能是多余，但为了给业务部门更友好的开发体验，还是做了一些可能没意义的操作，让移动端和PC端对于按钮权限是使用方式一致，都是使用自定义指令的书写方式来实现按钮权限，虽然uni-app不支持自定义指令，但是我们有webpack的loader起到代码转换的作用，将自定义指令v-perms:add在编译阶段转换为v-if="$perms('add')"，然后去处理$perms方法对于权限的判断，就可以具有自定义指令实现按钮权限的开发体验了。

每个工具的实现都不算简单，本文实现的loader，尽管原理挺简单的，好像可以一蹴而就，但真的去实现的话，发现还是需要很多的知识储备，整体流程也没想象的那么简单，但有个点子就是好的开始，经过些许努力，终将成就一个不错的工具。

准备

实现uni-app自定义指令按钮权限需要涉及到对于vue.config.js新增loader配置，基础正则知识，webpack的loader开发和调试，以及npm本地调试和发布，接下来就从了解这些前置知识开始。

目录结构

chainWebpack 新增loader

vue的loader配置是通过chainWebpack来实现链式配置，vue.config.js新增一个loader配置可以查看vue-cli文档，具体实现：

// vue.config.js
module.exports = {chainWebpack: config => {// GraphQL Loaderconfig.module.rule('graphql').test(/.graphql$/).use('graphql-tag/loader').loader('graphql-tag/loader').end()}
} 
1
2
3

正则

实现自定义指令替换，需要查找所有的v-perms:xxx，并且需要拿到xxx对应的值，将其转换为v-if="$perms('xxx')"，所以就有了如下表达式，其作用就是匹配v-perms:xxx表达式，并提取到xxx内容。

/v-perms:([^/<>\s]*)/g 
1

针对正则基础比较薄弱的同学，我来解释一下上面这个正则表达式：

• 首先，v-perms:用于匹配以v-perms:开头的字符串
• 接着是()