gubersail-shop-app/components/debounce-button.vue

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

<script>
	export default {
		props: {
			size: {
				type: String,
				default: 'default'
			},
			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
			},
			readOnly: {
				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>