vue3 自定义指令控制按钮权限

【vue3 自定义指令控制按钮权限】经过1个周的摸索和查阅资料 , 终于搞定VUE3中自定义指令 , 实现按钮级别的权限控制 。当然 , 只是简单的对按钮进行隐藏和删除的dom操作比较容易 , 一直纠结的是当按钮无权限时 , 不是直接删除当前dom元素(button按钮) , 这样用户体验不好 , 让人感觉没有这个功能 。为了提高用户体验 , 当该按钮无权使用时 , 使用el-tooltip功能进行提醒 。以下是个人的做法 , 是否有弊端和不足 , 或者各位高手有更优的方案 , 欢迎指导和赐教!
1、总体效果如下:

vue3 自定义指令控制按钮权限

文章插图
2、permissionlist组件中的按钮设置为:增加、修改和删除三个按钮 , 为了让button按钮disabled时 , 可以让tooltip继续有效 , 在button外层加了个span 。为了通过自定义指令中方便控制tooltip , vue3好像必须把自定义指令放在tooltip的外层 , 所以又在tooltip外层加了个span以放在自定义指令v-has 。
 <template>  <el-card class="query-condition">    <el-form :inline="true" :model="PermissionQuery" class="demo-form-inline">      <el-form-item>        <span v-has="'/sys/permission_edit'">          <el-tooltip placement="top" content="无权访问,请联系管理员" type="tooltip" disabled>            <span>              <el-button type="primary" @click="PermissionAdd()">新增</el-button>            </span>          </el-tooltip>        </span>      </el-form-item>      <el-form-item label="权限名称:">        <el-input v-model="PermissionQuery.title" placeholder="请输入权限名称" />      </el-form-item>      <el-form-item>        <el-button type="primary" @click="onQuery(PermissionQuery)">查询</el-button>      </el-form-item>    </el-form>  </el-card>  <el-row>    <el-col :span="24">      <el-table border :data=https://www.huyubaike.com/biancheng/"table.data">

经验总结扩展阅读