MD_worker/components/My-button/My-button.vue

<template>
    <view class="button-box" :style="customStyle" :class="disabled && 'disabled'" hover-class="navigator-hover" hover-start-time="50"
        hover-stay-time="200" @click="handleClick">
        <view v-if="loading" style="margin-right: 10rpx;">
            <up-loading-icon size="18" mode="circle" />
        </view>{{ loading ? loadingText || text + '中...' : text }}
    </view>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    text: {
        type: String,
        default: '按钮'
    },
    loading: {
        type: Boolean,
        default: false
    },
    loadingText: {
        type: String
    },
    disabled: {
        type: Boolean,
        default: false
    },
    customStyle: {
        type: Object
    },
    onClick: {
        type: Function,
        default: () => { }
    }
});

function handleClick() {
    // 如果处于加载状态或禁用状态，则不执行任何操作
    if (props.loading || props.disabled) return;
    // 执行传入的点击事件
    props.onClick();
}
</script>

<style lang="scss" scoped>
.button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    background-color: #3874F6;
    color: #FFFFFF;
    box-sizing: border-box;
    border-radius: 40rpx;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-size: 32rpx;
    color: #FFFFFF;
}

.disabled {
    opacity: 0.4;
}
</style>