开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

定义size属性看图分为默认中小米尔四种类型

通过size定义按钮的大小，子组件通过接受的属性来动态修改按钮大小

//父组件
<template>
    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" border round disabled size="small">蓝色按钮</a-button>
        <a-button type="success" size="mini">绿色按钮</a-button>
        <a-button type="wraning">橙色按钮</a-button>
        <a-button type="danger" border>红色按钮</a-button>
    </div>
</template>
<script>
export default {
    name: 'Home',
    components: {
        'a-button': () => import('@/components/button')
    }
}
</script>
//子组件
<template>
    
        <button  class="a-button"  :class="[isSize]">
            <slot />
        </button>
        
</template>
<script>
export default {
    name: "AButton",
    props: {
        size: {
            type: String,
            default: ''
        }
    },
    computed: {
        isSize() {
            return this.size ? `a-button-${this.size}` : ''
        },
    },
    data() {
    return {};
    },
};
</script>
<style lang="less" scoped>
button {
    margin: 20px;
}
.a-button {
    border-width: 1px;
    border-style: solid;
    border-color: #dcdfdc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
    height: 40px;
}
.a-button-medium {
    height: 36px;
}
.a-button-small {
    padding: 0 15px;
    height: 32px;
    font-size: 12px;
}
.a-button-mini {
    padding: 0 15px;
    height: 28px;
    font-size: 12px;
}

</style>

min-width弹性宽度

通过min-width来设置按钮的弹性宽度，自动拉长

<template>
    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" border round disabled size="small">蓝色按钮</a-button>
        <a-button type="success" size="mini">绿色按钮</a-button>
        <a-button type="wraning" min-width="160px">橙色按钮</a-button>
        <a-button type="danger" min-width="160px" border>红色按钮红色按钮红色按钮红色按钮</a-button>
    </div>
</template>
//组件
        <button  
            class="a-button"
            :disabled="disabled" 
            :class="[theme, isBorder, isRound,isSize]"
            :style="[minWidthCss]"
        >
            <slot />
        </button>
            props: {
        minWidth: {
            type: String,
            default: ''
        }
    },
       computed: {
        minWidthCss() {
            if(!this.minWidth) { return ""}
            return { 'min-width' : this.minWidth }
        }
    },