Vue でのディレクティブの使用 - カスタム ディレクティブ コントロール ボタンの権限

1. 新しい hasPermission.js ファイルを作成します

const hasPermission = {
  install (Vue, options) {
    Vue.directive('has', {
      inserted (el, binding, vnode) {
        // 由于前端路由是配置在数据库中，通过在数据库中的code值来，自定义指令来控制按钮。
        let perms = vnode.context.$store.state.app.menuList; //vuex中的路由菜单
        let check=false; // 定义变量
        let length = perms.length;
        let v = binding.value;
        for(var i = 0 ;i!==length;i++){  // 遍历路由菜单数据
          let menu =perms[i]; 
          if(menu&&menu.meta&&menu.meta.permTypes==v){
            check =true; // code值与自定义中的值相同，显示按钮
            break;
          }
          if(menu&&menu.children&&menu.children.length>0){
            let children = menu.children;
            for(var j = 0;j!==children.length;j++){
              if(children[j].meta.permTypes==v){ // 同理如上
                check=true;
                break;
              }
            }
          }
        }
        if (!check) { // 如果code值与自定义指令不相同。
          // el.parentNode.removeChild(el);
             el.remove()
        }
      }
    });
  }
};
export default hasPermission;

2. main.jsに導入

import hasPermission from '@/libs/hasPermission'
Vue.use(hasPermission);
Vue.prototype.hasPermission = hasPermission;

3. データベース内のコード値。

INSERT INTO fast_oss.oss_menu (id, code, title, parent_id,) VALUES(7060306,'hojiPremiunmManual', '手动', 7058227)

4. インターフェイスを使用してメニュー情報を取得する場合、ボタンのコードを vuex に保存します

vm.$store.commit('updataButton',resp.result.functions)

5. vuex でのミューテーション機能

 updataButton(state,data) {
   state.dashControl = data  // dashControl是state里的一个数组
 },

7. ページの使用。

<Button type="ghost" @click="derive" v-has="'hojiPremiunmManual'">导出</Button>

ここでの v-has 値の内容は文字列型である必要があることに注意してください。

8. レンダリング機能で使用されます。

return h("div",[
  h("Button",{
      props: {  type: 'text',  size: 'small'},
      style: { marginRight: '15px' },
      on:{
         click:()=>{
            this.manualUpdate(params.row)
         }
      },
      directives: [{ name: "has", value: "hojiPremiunmManual" }], //  value值为SQL中的code值
   },"手动")
])

ボタン表示時の効果

 ボタンが表示されていない場合：