按钮样式统一

子组件

<template>
    <div class="btn_box">
        <div :class="['btn',classType]">
            <slot name="btn"></slot>
        </div>
    </div>
</template>

<script setup>
import { computed, useAttrs } from 'vue';
defineOptions({// 定义组件选项，设置inheritAttrs为false，表示不自动将属性绑定到根元素上
  inheritAttrs: false
});

let attrs = useAttrs();// 使用useAttrs()获取组件的属性
const classTypeList = ['primary', 'success', 'info', 'warning', 'danger'];// 定义一个包含所有可能类型的数组

const classType = computed(() => {// 计算属性，用于根据传入的type属性返回对应的class类型
    let lowType = attrs.type.toLowerCase()    // 将type属性转换为小写
    if(!classTypeList.includes(lowType)) return 'info'    // 如果type属性不在classTypeList数组中，则返回'info'
    return lowType    // 否则返回type属性的小写形式
})


</script>

<style lang="scss" scoped>
$btnClass: ('primary', 'success', 'info', 'warning', 'danger');
$btnColors: #409eff, #67c23a, #909399, #e6a23c, #f56c6c;
@for $i from 1 through length($btnColors) {
    $ClasStyle:nth($btnClass, $i);
    .btn_box{
        cursor: pointer;
        @extend .center;
    }
    .btn{
        border-radius: 10px;
        padding: 10px 15px;
    }
    .btn.#{$ClasStyle}{
        $color: nth($btnColors, $i);
        background: $color;
        color: #fff;
        &:hover{
            background: lighten($color: $color, $amount:10%);
        }
        &:active{
            background: darken($color: $color, $amount:10%);
        }
        &:disabled{
            background: lighten($color: $color, $amount:20%);
            color: lighten($color: $color, $amount:40%);
        }
    }
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

父组件

<template>

    <Btnview :type="'primary'">
                <template v-slot:btn>
                    <div>998877</div>
                </template>
     </Btnview>

</template>

<script lang="ts" setup name="login">

const Btnview = defineAsyncComponent(()=>import('../../components/button/button.vue'));//引入按钮组件

</script>``

<style lang="less" scoped>
</style>