欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3?自定義指令控制按鈕權(quán)限的操作代碼

 更新時(shí)間:2022年10月08日 09:44:32   作者:ytwqg  
這篇文章主要介紹了vue3?自定義指令控制按鈕權(quán)限,為了提高用戶(hù)體驗(yàn),當(dāng)該按鈕無(wú)權(quán)使用時(shí),使用el-tooltip功能進(jìn)行提醒,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

經(jīng)過(guò)1個(gè)周的摸索和查閱資料,終于搞定VUE3中自定義指令,實(shí)現(xiàn)按鈕級(jí)別的權(quán)限控制。當(dāng)然,只是簡(jiǎn)單的對(duì)按鈕進(jìn)行隱藏和刪除的dom操作比較容易,一直糾結(jié)的是當(dāng)按鈕無(wú)權(quán)限時(shí),不是直接刪除當(dāng)前dom元素(button按鈕),這樣用戶(hù)體驗(yàn)不好,讓人感覺(jué)沒(méi)有這個(gè)功能。為了提高用戶(hù)體驗(yàn),當(dāng)該按鈕無(wú)權(quán)使用時(shí),使用el-tooltip功能進(jìn)行提醒。以下是個(gè)人的做法,是否有弊端和不足,或者各位高手有更優(yōu)的方案,歡迎指導(dǎo)和賜教!

1、總體效果如下:

2、permissionlist組件中的按鈕設(shè)置為:增加、修改和刪除三個(gè)按鈕,為了讓button按鈕disabled時(shí),可以讓tooltip繼續(xù)有效,在button外層加了個(gè)span。為了通過(guò)自定義指令中方便控制tooltip,vue3好像必須把自定義指令放在tooltip的外層,所以又在tooltip外層加了個(gè)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="無(wú)權(quán)訪問(wèn),請(qǐng)聯(lián)系管理員" type="tooltip" disabled>
            <span>
              <el-button type="primary" @click="PermissionAdd()">新增</el-button>
            </span>
          </el-tooltip>
        </span>
      </el-form-item>
      <el-form-item label="權(quán)限名稱(chēng):">
        <el-input v-model="PermissionQuery.title" placeholder="請(qǐng)輸入權(quán)限名稱(chēng)" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery(PermissionQuery)">查詢(xún)</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-row>
    <el-col :span="24">
      <el-table border :data="table.data">
        <el-table-column label="#" width="80" align="center" prop="id"></el-table-column>
        <el-table-column label="權(quán)限名稱(chēng)" align="center" prop="title"></el-table-column>
        <el-table-column label="URL地址" align="center" prop="url"></el-table-column>
        <el-table-column label="所屬菜單" align="center" prop="menuname.menuname"></el-table-column>
        <el-table-column label="顯示順序" align="center" prop="sort" width="90"></el-table-column>
        <el-table-column label="路由文件" align="center" prop="route"></el-table-column>
        <el-table-column label="權(quán)限說(shuō)明" align="center" prop="description"></el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template #default="scope">
            <span v-has="'/sys/permission_edit'">
              <el-tooltip placement="top-end" content="無(wú)權(quán)訪問(wèn),請(qǐng)聯(lián)系管理員" type="tooltip" disabled>
                <span>
                  <el-button type="primary" size="small" @click="PermissionEdit(scope.row)">
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                </span>
              </el-tooltip>
            </span>
            <span v-has="'/sys/permission_del'">
              <el-tooltip placement="top-end" content="無(wú)權(quán)訪問(wèn),請(qǐng)聯(lián)系管理員" type="tooltip" disabled>
                <span>
                  <el-button type="danger" size="small" @click="PermissionDel(scope.row.id)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </span>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <PaginationView :total="total" @pageChange="handleChangePage"></PaginationView>
    </el-col>
  </el-row>
  <el-dialog v-model="dialogFormVisible" :title="form_state ? '權(quán)限新增' : '權(quán)限修改'" :close-on-click-modal="false" width="400px" center :before-close="formCancel">
    <el-form :model="formData" :rules="rules" ref="editForm">
      <el-form-item v-show="false" label="#" prop="id">
        <el-input type="hidden" v-model="formData.id"></el-input>
      </el-form-item>
      <el-form-item label="權(quán)限名稱(chēng)" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="URL地址" prop="url">
        <el-input v-model="formData.url"></el-input>
      </el-form-item>
      <el-form-item label="所屬菜單" prop="menuid">
        <el-select v-model="formData.menuid" placeholder="請(qǐng)選擇所屬菜單" style="width: 100%" clearable>
          <el-option v-for="(menu, index) in menus.data" :key="index" :label="menu.menuname" :value="menu.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="路由文件" prop="route">
        <el-input v-model="formData.route"></el-input>
      </el-form-item>
      <el-form-item label="顯示順序" prop="sort">
        <el-input v-model="formData.sort"></el-input>
      </el-form-item>
      <el-form-item label="權(quán)限說(shuō)明" prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="formCancel()">取消</el-button>
        <el-button type="primary" @click="formSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

3、自定義指令組件(utils/haspermissions.js)

export const hasPermission = {
    install(Vue) {
        //自定義指令v-has:
        Vue.directive('has', {
            mounted(el, binding, vnode) {
                if (!checkPermission(binding.value)) {
                    let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip')
                    tooltipNode.component.props.disabled = false
                    el.querySelector("button").setAttribute("disabled", true)
                }
            },
        });
        //權(quán)限檢查方法
        function checkPermission(value) {
            let isExist = false;
            let userlogin = JSON.parse(sessionStorage.getItem("userlogin") || "[]");
            let buttonArr = userlogin.haspermissions
            //判斷是否按鈕有權(quán)限
            if (buttonArr.includes(value)) {
                isExist = true;
            }
            return isExist;
        }
    }
};
export default hasPermission;

4、將自定義指令加入vue3的全局指令,以方便所有組件中可以使用(在main.js中引入自定義指令組件然后use注冊(cè))。

到此這篇關(guān)于vue3 自定義指令控制按鈕權(quán)限的文章就介紹到這了,更多相關(guān)vue3 自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue的輪播圖組件實(shí)現(xiàn)方法

    Vue的輪播圖組件實(shí)現(xiàn)方法

    下面小編就為大家分享一篇Vue的輪播圖組件實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題

    vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題

    這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue-socket.io接收不到數(shù)據(jù)問(wèn)題的解決方法

    vue-socket.io接收不到數(shù)據(jù)問(wèn)題的解決方法

    這篇文章主要介紹了解決vue-socket.io接收不到數(shù)據(jù)問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • 深入探討Vue3中Composition API的使用方法

    深入探討Vue3中Composition API的使用方法

    Vue3的Composition API是一個(gè)全新的API,它允許開(kāi)發(fā)人員將Vue組件中的邏輯封裝在單獨(dú)的功能性組合中,而不是依賴(lài)于Vue選項(xiàng)對(duì)象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下
    2023-07-07
  • vue通過(guò)krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼

    vue通過(guò)krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼

    這篇文章主要介紹了vue上通過(guò)krpano.js實(shí)現(xiàn)360全景圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-10-10
  • 關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問(wèn)題 后端返回的是byte[]數(shù)組

    關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問(wèn)題 后端返回的是byte[]數(shù)組

    這篇文章主要介紹了關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問(wèn)題 后端返回的是byte[]數(shù)組,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • VUEX?使用?mutations的兩種方式

    VUEX?使用?mutations的兩種方式

    這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations,在mutations中定義一個(gè)方法,這個(gè)方法就是把點(diǎn)擊的index(也就是每個(gè)列表的唯一標(biāo)識(shí)),傳給state中的當(dāng)前標(biāo)識(shí),需要的朋友可以參考下
    2023-01-01
  • Vue透?jìng)鰽ttributes使用解析

    Vue透?jìng)鰽ttributes使用解析

    本文主要介紹了Vue透?jìng)鰽ttributes使用解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法

    vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過(guò)使用生命周期的 created() 函數(shù),在組件創(chuàng)建完成后調(diào)用該方法,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下
    2022-11-11
  • Vue.js每天必學(xué)之過(guò)濾器與自定義過(guò)濾器

    Vue.js每天必學(xué)之過(guò)濾器與自定義過(guò)濾器

    Vue.js每天必學(xué)之過(guò)濾器與自定義過(guò)濾器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09

最新評(píng)論