封装el-button按钮实现权限控制和防抖操作

子组件封装：

 1 <template>
 2     <el-button 
 3         v-bind="$attrs" 
 4         :loading="loadingStatus"
 5         @click="handleClick"
 6         v-if="judgePerm(permission)"
 7     >
 8     <slot/>
 9     </el-button>
10 </template>
11 
12 <script>
13 import { hasPermission } from './index.js'
14 export default {
15     name: 'prButton',
16     props: {
17         controlLoading: {
18             type: Boolean,
19             default: false
20         },
21         permission: {
22             type: Number,
23         },
24     },
25     data() {
26         return {
27             loadingStatus: false
28         }
29     },
30     methods: {
31         judgePerm(perms){//按妞权限控制
32            return hasPermission(perms)
33         },
34         handleClick() {
35             if (this.controlLoading) {
36                 this.loadingStatus = true
37             }
38             this.$emit('click', () => {
39                 this.loadingStatus = false
40             })
41         }
42     }
43 }
44 </script>
45 
46 <style>
47 
48 </style>

其中v-bind="$attrs"继承el-button的所有方法和属性设置，judgePerm（）方法是为了进行权限控制，其中permission是当前按钮的权限标识，可以是数字或者字符串。loadingStatus是进行控制按钮被连续点击发送请求的问题，当点击后会调用handleClick（）方法。然后通过$emit触发click事件将回调函数传到父组件，来实现loading。

import store from '@/store'
export function hasPermission(perms){
    return perms==store.state.count;
}

获取权限进行匹配返回，这个可以根据自己项目的要求来写不同的方法。

父组件：

<template>
    <div>
        <div id="header">
              <pr-button  :permission ="20" type="primary" @click="submit2">测试按妞</pr-button>
        </div>
  </div>
</template>

<script>
export default {
    name:"RetrievalHeader",
    methods:{
      submit2(done){
        setTimeout(() => {
          done()
        }, 3000)
      }
    },
}

子组件触发click事件进而调用父组件的submit2方法，来进行事件的处理最后通过调用done（），来结束loading，实现连续点击触发请求。

posted @ 2021-08-13 13:42  奔跑的哈密瓜  阅读(875)  评论(0)  编辑  收藏  举报