【项目实战】Vue项目开发之自定义指令（二）这是我参与更文挑战的第 17 天，活动详情查看：更文挑战工欲善其事，必

这是我参与更文挑战的第 17 天，活动详情查看：更文挑战

前文【专栏-效率工具】系列文章，从开发工具、版本控制工具、接口调试工具到开发规范，再到博客搭建工具等等，当然还有许多工具需要我们慢慢探索的，工作学习中用到的工具，分别一一作了介绍，养成习惯，提高开发效率，减少 bug 数量等等。这里码上几篇链接：

【接口调试工具-Insomnia】、

【效率工具】优化美丽舒适的开发环境

【效率工具】下一代接口模拟工具-mock service worker...-，-、

记录提高日常码字幸福感的【实测能用】自用效率工具，持续更新、记录

仅当参考，按需食用，不足之处，欢迎各路大佬不吝赐教，补充完善，欢迎分享

工欲善其事，必先利其器。实践（巧偷懒）促进科技发展-_-!
本文及后续更文将为大家分享日常开发用到的一些工具函数，总结的样式，代码规范(CodeStyle)，代码段等。为刚融入团队的新同学可以迅速 follow 团队的开发规范，快速融入到项目开发中，提高我们的工作效率，减少累赘代码，提高代码质量，减少bug.
这里继续为大家分享一些代码段-Vue自定义指令： Vue-Directives

自定义指令 Vue Directives

1. 权限控制 `v-permission`

1.1 具体逻辑

这里作简单的权限介绍，通过传入值控制是否显示按钮，具体逻辑如下，再复杂权限则根据需求进一步深入探究

// directives/permission.js
function checkArray(key) {
  let arr = ['1', '2', '3', '4', 'demo']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

const permission = {
  inserted: function (el, binding) {
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        console.log('el: ', el)
        console.log('el.parentNode: ', el.parentNode)

        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}

export default permission

1.2 使用方法：引入指令 && 注册

1.2.1 注册指令：抽离模块，方便管理

// directives/index.js
import permission from './permission'
...

// 自定义指令
const directives = {
  waterMarker,
  permission,
  ...
}
// 批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}

1.2.2 注册： main.js

// main.js
import install from './directives'
Vue.use(install)

1.2.3 使用：

<div class="btns">
  <!-- 1 2 3 4 demo 显示 -->
  <button v-permission="'1'">权限按钮1</button>
  <button v-permission="'2'">权限按钮2</button>
  <button v-permission="'demo'">权限按钮demo</button>
  <!-- 5 不显示 -->
  <button v-permission="'5'">权限按钮5</button>
</div>

1.2.4 效果：

在 perssion.js 中的逻辑不包含 '5'，故只显示 权限按钮1、权限按钮2、权限按钮demo， 权限按钮5 不显示

v-perssion-btn

2. style控制显示与否 v-visible

2.1 指令逻辑 && 注册：

指令在逻辑js文件中已注册，然后在 main.js 中引入即可

// main.js
import './directives'

具体逻辑如下：

// src/directives/visible.js
import Vue from 'vue'

function handler(el, binding) {
  if (el) {
    const visible = Boolean(binding.value)
    el.style.visibility = visible ? 'visible' : 'hidden'
  }
}

const visible = Vue.directive('visible', {
  bind: async function (el, binding, vnode, oldVnode) {
    handler(el, binding)
  },
  update(el, binding, vnode, oldVnode) {
    handler(el, binding)
  },
})

export default visible

2.2 使用: 用在表单里，控制编辑、保存、删除等按钮的显示与否

<span v-visible="allowSetDefault"
      class="icon-btn color-orange"
      @click="handleSetDefault">
  置为默认
</span>
<a v-visible="!isEditing"
    class="icon-btn"
    @click="startEdit">
  编辑
</a>
<a v-visible="isEditing"
    class="icon-btn color-green"
    @click="handleSave">
  保存
</a>
<span v-visible="allowRemove"
      v-permission="uiPermission.leadDetailContactDelete"
      class="icon-btn del"
      @click="remove">
  删除
</span>

这里列举部分仅作参考，抛砖引玉，

有没有 get 到呢?

欢迎各路大神评论出你的私藏工具, 把你的好用的【效率工具】分享给大家=，=

今日份预告：

继续更新分享一些积累的 codes/utils/components/styles等等吧

下一篇敬请期待！ hahah~

【项目实战】Vue项目开发之自定义指令（二）