gubersail-app/components/debounce-button.vue

<template>
	<button :type="type" :class="['debounce-btn', disabled ? 'disabled' : '']" :disabled="disabled" @click="handleClick"
		:style="{backgroundColor:bgColor,color:color}" style="border-radius: 50px;" :loading="loading">
		<slot>{{ text }}</slot>
	</button>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: null
			},
			color: {
				type: String,
				default: '#FFFFFF'
			},
			bgColor: {
				type: String,
				default: null
			},
			text: {
				type: String,
				default: '点击按钮'
			},
			debounceTime: {
				type: Number,
				default: 2000
			},
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				disabled: false,
				timer: null
			}
		},
		methods: {
			handleClick() {
				if (this.disabled) return

				this.disabled = true
				this.$emit('click')
				this.timer = setTimeout(() => {
					this.disabled = false
				}, this.debounceTime)
			}
		},
		beforeDestroy() {
			clearTimeout(this.timer)
		}
	}
</script>

<style scoped>
	.debounce-btn:active {
		opacity: 0.8;
	}

	.debounce-btn.disabled {
		cursor: not-allowed;
		opacity: 0.8;
	}
</style>