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>
        <view v-if="frontIcon && !loading" :style="frontIconStyle" class="iconfont icon" :class="frontIcon" />
        {{ loading ? loadingText || text + '中...' : text }}
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['onClick'])

const props = defineProps({
    frontIcon: {
        type: String,
        default: ''
    },
    text: {
        type: String,
        default: '按钮'
    },
    loading: {
        type: Boolean,
        default: false
    },
    loadingText: {
        type: String
    },
    disabled: {
        type: Boolean,
        default: false
    },
    customStyle: {
        type: Object
    },
    frontIconStyle: {
        type: Object
    },
    onClick: {
        type: Function,
        default: () => { }
    },
    phonenumber: {
        type: [String, Number],
        default: ''
    }
});

function handleClick() {
    if (props.phonenumber) return uni.makePhoneCall({
        phoneNumber: String(props.phonenumber),
        success: () => {
            console.log('拨打电话成功');
        },
        fail: (err) => {
            console.error('拨打电话失败', err);
        }
    });
    // 如果处于加载状态或禁用状态，则不执行任何操作
    if (props.loading || props.disabled) return;

    // 执行传入的点击事件
    emit('onClick');
}
</script>

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

    .icon {
        margin-right: 20rpx;
    }
}

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