【vue_2】创建一个弹出权限不足的提示框

定义了一个名为 getUserRole 的 JavaScript 函数，该函数接受一个参数 authorityId，根据这个参数的不同值返回相应的用户角色字符串。这段代码的目的是根据传入的 authorityId 值判断用户的角色，然后返回相应的角色名称。

如果 authorityId 的值等于 888，函数返回字符串 '超级管理员'。
如果 authorityId 的值等于2，函数返回字符串 '游客'。
如果 authorityId 的值等于 1000，函数返回字符串 'abc'。
如果 authorityId 的值等于 1200，函数返回字符串 '测试人员'。
如果 authorityId 的值等于 2000，函数返回字符串 '开发人员'。
如果 authorityId 的值等于 3001，函数返回字符串 'def'。
如果 authorityId 的值不属于上述任何一个特定的值，函数返回字符串 '其他角色'。

javascript 复制代码

function getUserRole(authorityId) {
    if (authorityId === 888) {
        return '超级管理员';
    } else if (authorityId === 2) {
        return '游客';
    } else if (authorityId === 1000) {
        return 'abc';
    } else if (authorityId === 1200) {
        return '测试人员';
    } else if (authorityId === 2000) {
        return '开发人员';
    } else if (authorityId === 3001) {
        return 'def';
    } else {
        return '其他角色';
    }
}

定义了一个名为 authority_message 的 JavaScript 箭头函数。该函数使用 Element UI 框架中的 ElMessage 组件显示一个警告消息，提示用户当前用户的权限不够。

javascript 复制代码

const authority_message = () => {
    ElMessage({
        type: 'warning',
        message: '当前用户的权限不够'
    });
};

上面这个 ElMessage是已经封装好的，是git-vue-admin框架自带的东西。

javascript 复制代码

<div style="display: block;">
      <el-link v-if="![888,1000,1200,2000,3000,3001].includes(userStore.userInfo.authorityId)" class="link" type="primary" @click="authority_message">
        <h1>账号管理</h1>
    </el-link>
    <el-link v-else class="link" type="primary" @click="toTarget('person')">
      <h1>账号管理</h1></el-link>
</div>

上面这个userStore.userInfo.authorityId能够拿到对应当前权限人员的号码，如果是超级管理员，拿到的就是888。

javascript 复制代码

console.log('111aqd',userStore.userInfo.authorityId);

可以通过上面这个看是否在控制台打印出有对应的号码。

v-if的逻辑是，如果拿到的数字不是在[888,1000,1200,2000,3000,3001]当中的话，就提示说该用户没有权限。

v-else的逻辑是，如果不满足v-if的条件，就跳转界面。

出现的问题：为什么底下的这些框框看起来高矮不一？并且当切换为超级管理员与测试人员的时候，底下的框框长度也不一样？