vue項目按鈕權限配置

業務說明：添加公共方法自定義指令，根據頁面傳入的按鈕標識，判斷頁面是否含有該按鈕權限，沒有權限的按鈕隱藏
1:在public.js文件封裝公共方法：

let TF = {
  btnList(name, index) {//name 按鈕名稱 index 頁面存在多個重復按鈕時添加index v-has="$TF.btnList('新增',2)"
        let arr = [
            { id: 'addBtn', name: '新增' },
            { id: 'editBtn', name: '編輯' },
            { id: 'delBtn', name: '刪除' },
            { id: 'importBtn', name: '導入' },
            { id: 'exportBtn', name: '導出' },
            { id: 'copyBtn', name: '復制' },
            { id: 'batchImportBtn', name: '批量導入' },
            { id: 'batchExportBtn', name: '批量導出' },
            { id: 'batchAddBtn', name: '批量添加' },
            { id: 'batchDelBtn', name: '批量刪除' },
            { id: 'batchCopyBtn', name: '批量復制' },
            { id: 'templateDownloadBtn', name: '模板下載' }
        ]
        let btn = arr.find((item) => { if (item.name == name) { return item } })
        let btnTab = ''
        if (btn) {
            btnTab = btn.id
            if (index) {
                btnTab = btnTab + index
            }
        }
        return btnTab
    }
}
export default TF

2：在main.js中全局引用

import TF from './utils/public'
import './utils/directives' 
import './utils/btnDirectives' 
Vue.prototype.$TF = TF;

3：btnDirectives.js文件：（前端控制權限隱藏按鈕 vue自定義指令v-has）

import Vue from 'vue'
import router from '../router/index'
//從存儲器拿出已經存好的公共菜單數據，來查找是否存在顯隱判斷標識。詳細見最后拓展解釋說明。
Vue.directive('has', {
    bind: function (el, binding) {   
        var index = router.app.$route.meta.btnTags.findIndex((item) => item.tag === binding.value) 
        if (index == -1) {
            el.style.display = 'none'
        } 
    }
})

4：在頁面中引用,例如新增，編輯刪除

 <el-button v-has="$TF.btnList('新增')" type="primary" icon="el-icon-circle-plus-outline" size="small" @click="onAdd">新增</el-button>
//當頁面出現第二個新增按鈕時候：
 <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="onAddItem" v-has="$TF.btnList('新增',2)">新增項目</el-button>
<el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-has="$TF.btnList('編輯')" @click="openForm(scope.row)" type="text" size="small">編輯</el-button>
            <el-button v-has="$TF.btnList('刪除')" @click='handleDeleteClick(scope.row)' type="text" size="small">刪除</el-button>
          </template>
</el-table-column>

針對第三點拓展說明：
數據結構跟后台協商，路由菜單顯示三級，第一級：父級主菜單。第二級：每個頁面菜單名稱。第三級：該頁面下包含按鈕名稱信息