vue二次封装防止按钮重复点击组件

二次封装代码

RepeatButton.vue

<template>
    <el-button :loading="loading" v-bind="$attrs" @click="handleClick">
        <slot></slot>
    </el-button>
</template>
<script>
export default {
    data() {
        return {
            loading: false
        }
    },
    methods: {
        async handleClick() {
            this.loading = true
            try {
                await this.$listeners?.click?.()
            } catch (error) {
                console.error(error)
            }
            this.loading = false
        }
    }
}
</script>

使用示例

<template>
  <Repeat-Button @click="handleTest('aaa')" type="primary" size="mini">Loading按钮</Repeat-Button>
</template>
<script>
  // 导入组件
  import RepeatButton from './RepeatButton.vue'

  export default {
    components: {RepeatButton},
    methods: {
      handleTest(params) {
        console.log('handleTest', params);
        return new Promise(resolve => {
          setTimeout(() => {
            resolve()
          }, 1000)
        })
      }
    }
  }
</script>