caimei-applets-mcare/pages/goods/components/procurement-btn.vue

<template>
    <button class="pro-btn" :style="{
        width,
        height,
        background,
        color,
        fontSize,
        borderRadius: border ? borderRadius : '',
        lineHeight: height
    }">
        <span><slot></slot></span>
    </button>
</template>

<script>
    export default {
        props: {
            border: {
                type: Boolean,
                default: () => true
            },
            width: {
                type: String,
                default: () => '280rpx'
            },
            height: {
                type: String,
                default: () => '84rpx'
            },
            background: {
                type: String,
                default: () => '#FFF4E6'
            },
            color: {
                type: String,
                default: () => '#F3B574'
            },
            fontSize: {
                type: String,
                default: () => '32rpx'
            },
            borderRadius: {
                type: String,
                default: () => '45rpx'
            },
        }
    }
</script>

<style scoped lang="scss">
    .pro-btn {
        display: inline-block;/*变为行内块：*/
        line-height: 1;
        white-space: nowrap;/*规定段落中的文本不进行换行：*/
        cursor: pointer;
        text-align: center;
    }
</style>