1. 首頁 > 生活百科 > >

vue3 自定義指令控制按鈕權限

生活百科

經過1個周的摸索和查閱資料 ， 終于搞定VUE3中自定義指令，實現按鈕級別的權限控制 。當然，只是簡單的對按鈕進行隱藏和刪除的dom操作比較容易，一直糾結的是當按鈕無權限時，不是直接刪除當前dom元素（button按鈕），這樣用戶體驗不好，讓人感覺沒有這個功能 。為了提高用戶體驗，當該按鈕無權使用時，使用el-tooltip功能進行提醒 。以下是個人的做法，是否有弊端和不足，或者各位高手有更優的方案 ， 歡迎指導和賜教！
1、總體效果如下：

vue3 自定義指令控制按鈕權限

文章插圖
【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">

推薦閱讀