纯知识干货vue2学习之问答五-优快云博客

是不是后端开发的程序员都惧怕学习前端呢。我接触过很多同事都有此感受。如果你也有一样的感受，那就来看看这些问答，然后试着亲自上手敲敲代码。久而久之，你就会不自觉的学会了前端开发知识。

本文章列举了1个知识点的问答。

1，<span v-rescid="1004030106" @click="handleEdit(scope.$index, scope.row)" style="cursor: pointer; color: #ffa10b">编辑</span>
上面vue2代码，如何通过 v-rescid="1004030106" 来控制按钮显示权限？底层逻辑是什么什么？

        这个 v-rescid="1004030106" 是一个自定义指令，用于基于权限码控制元素的显示。让我详细解释其底层逻辑：
        底层实现原理
        1. 自定义指令定义

// directives/rescid.js
export default {
  inserted(el, binding) {
    const rescId = binding.value; // 获取权限码，如 1004030106
    const userPermissions = getUserPermissions(); // 获取用户权限列表
    
    // 检查用户是否有该权限
    if (!hasPermission(userPermissions, rescId)) {
      // 没有权限：隐藏或禁用元素
      el.style.display = 'none';
      // 或者：el.parentNode && el.parentNode.removeChild(el);
    }
  }
}

2. 注册指令

// main.js
import Vue from 'vue';
import rescid from '@/directives/rescid';

Vue.directive('rescid', rescid);

完整实现方案
基于 Vuex 的权限验证

// directives/rescid.js
import store from '@/store';

export default {
  inserted(el, binding) {
    const rescId = binding.value;
    
    // 从 Vuex 获取用户权限
    const userPermissions = store.getters['user/permissions'];
    
    // 检查权限
    if (!checkPermission(userPermissions, rescId)) {
      // 没有权限的处理方式
      handleNoPermission(el, binding);
    }
  },
  
  update(el, binding) {
    // 权限码变化时重新验证
    if (binding.value !== binding.oldValue) {
      const rescId = binding.value;
      const userPermissions = store.getters['user/permissions'];
      
      if (!checkPermission(userPermissions, rescId)) {
        handleNoPermission(el, binding);
      } else {
        handleHasPermission(el, binding);
      }
    }
  }
}

// 权限检查函数
function checkPermission(userPermissions, rescId) {
  if (!userPermissions || !Array.isArray(userPermissions)) {
    return false;
  }
  return userPermissions.includes(rescid);
}

// 无权限处理
function handleNoPermission(el, binding) {
  const { modifiers } = binding;
  
  if (modifiers.hide) {
    // 隐藏元素
    el.style.display = 'none';
  } else if (modifiers.disable) {
    // 禁用元素
    el.disabled = true;
    el.style.opacity = '0.5';
    el.style.cursor = 'not-allowed';
  } else {
    // 默认：移除元素
    el.parentNode && el.parentNode.removeChild(el);
  }
}

// 有权限处理
function handleHasPermission(el, binding) {
  el.style.display = '';
  el.disabled = false;
  el.style.opacity = '1';
  el.style.cursor = 'pointer';
}

在 Vue 项目中的使用
1. 基础使用

<template>
  <div>
    <!-- 单个权限控制 -->
    <button v-rescid="1004030106">编辑</button>
    
    <!-- 多个权限（需要全部拥有） -->
    <button v-rescid="[1004030106, 1004030107]">高级操作</button>
    
    <!-- 多个权限（拥有任意一个） -->
    <button v-rescid.any="[1004030106, 1004030107]">普通操作</button>
  </div>
</template>

2. 不同行为控制

<template>
  <div>
    <!-- 隐藏元素 -->
    <el-button v-rescid.hide="1004030106">隐藏按钮</el-button>
    
    <!-- 禁用元素 -->
    <el-button v-rescid.disable="1004030106">禁用按钮</el-button>
    
    <!-- 显示提示 -->
    <el-button v-rescid:tooltip="1004030106">提示按钮</el-button>
    
    <!-- 表格中的权限控制 -->
    <el-table>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button 
            v-rescid="1004030106"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          
          <el-button 
            v-rescid="1004030107"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

权限数据来源
Vuex Store 中的权限管理

// store/modules/user.js
export default {
  state: {
    userInfo: null,
    permissions: [] // 权限码数组
  },
  
  mutations: {
    SET_USER_PERMISSIONS(state, permissions) {
      state.permissions = permissions;
    }
  },
  
  actions: {
    async loadUserPermissions({ commit }) {
      try {
        const response = await api.getUserPermissions();
        commit('SET_USER_PERMISSIONS', response.data);
        // 同时存储到本地
        localStorage.setItem('userPermissions', JSON.stringify(response.data));
      } catch (error) {
        console.error('加载权限失败:', error);
      }
    }
  },
  
  getters: {
    permissions: state => state.permissions,
    hasPermission: state => rescId => {
      return state.permissions.includes(rescId);
    }
  }
}

        总结
        v-rescid="1004030106" 的底层逻辑：
        自定义指令：通过 Vue 自定义指令机制实现
        权限验证：比较指令值与用户权限列表
        DOM 操作：根据验证结果显示/隐藏/禁用元素
        响应式更新：权限变化时自动更新界面

如果喜欢本文章内容请点个关注~~,谢谢！