封裝el-button按鈕實現權限控制和防抖操作

子組件封裝：

<template>
    <el-button 
        v-bind="$attrs" 
        :loading="loadingStatus"
        @click="handleClick"
        v-if="judgePerm(permission)"
    >
    <slot/>
    </el-button>
</template>

<script>
import { hasPermission } from './index.js'
export default {
    name: 'prButton',
    props: {
        controlLoading: {
            type: Boolean,
            default: false
        },
        permission: {
            type: Number,
        },
    },
    data() {
        return {
            loadingStatus: false
        }
    },
    methods: {
        judgePerm(perms){//按妞權限控制
           return hasPermission(perms)
        },
        handleClick() {
            if (this.controlLoading) {
                this.loadingStatus = true
            }
            this.$emit('click', () => {
                this.loadingStatus = false
            })
        }
    }
}
</script>

<style>

</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，實現連續點擊觸發請求。