草庐IT

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

ytwqg 2023-03-28 原文

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

1、总体效果如下:

 

 

2、permissionlist组件中的按钮设置为:增加、修改和删除三个按钮,为了让button按钮disabled时,可以让tooltip继续有效,在button外层加了个span。为了通过自定义指令中方便控制tooltip,vue3好像必须把自定义指令放在tooltip的外层,所以又在tooltip外层加了个span以放在自定义指令v-has。

  <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="table.data">
        <el-table-column label="#" width="80" align="center" prop="id"></el-table-column>
        <el-table-column label="权限名称" 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="权限说明" 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="无权访问,请联系管理员" 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="无权访问,请联系管理员" 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 ? '权限新增' : '权限修改'" :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="权限名称" 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="请选择所属菜单" 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="权限说明" 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)
                }
            },
        });
        //权限检查方法
        function checkPermission(value) {
            let isExist = false;
            let userlogin = JSON.parse(sessionStorage.getItem("userlogin") || "[]");
            let buttonArr = userlogin.haspermissions
            //判断是否按钮有权限
            if (buttonArr.includes(value)) {
                isExist = true;
            }
            return isExist;
        }
    }
};
export default hasPermission;

4、将自定义指令加入vue3的全局指令,以方便所有组件中可以使用(在main.js中引入自定义指令组件然后use注册)。

 

自定vue3nbspdivspan前端开发

有关vue3 自定义指令控制按钮权限的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点,但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  3. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢

  4. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切,所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时,我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗?我正在使用OSX并安装了rvm。 最佳答案 或者,您可以只使用“require”,它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  5. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时,出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem,并且我有rb-readline(0.4.2)(人们推荐的最少

  6. ruby-on-rails - 带 Spring 锁的 Rails 4 控制台 - 2

    我正在使用Ruby2.1.1和Rails4.1.0.rc1。当执行railsc时,它被锁定了。使用Ctrl-C停止,我得到以下错误日志:~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`gets':Interruptfrom~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`verify_server_version'from~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.

  7. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift,它运行良好,但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题?我尝试更新ruby​​gems,但它也给出了权限被拒绝的错误,我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  8. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  9. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法,我该如何引发错误??通常,我如何定义方法参数的条件?比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头,如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  10. ruby - 如何在 Grape 中定义哈希数组? - 2

    我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>

随机推荐