子元件封裝：

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