按钮样式统一

子组件

<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>