【項目實戰】Vue項目開發之自定義指令（二）

這是我參與更文挑戰的第 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 不顯示

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~