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

图标1 详细的话点这里

图标2

此图标我们分为 前缀icon-prefix 和 后缀icon-suffix

    <span>
         <!-- 前缀 -->
         <i class="iconfont icon-prefix"></i>
         <slot />
         <!-- 后缀 -->
         <i class="iconfont icon-suffix"</i>
    </span>
    

通过perfix定义前缀图标，suffix定义后缀图标，将想要的图标的类名传给组件

    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" perfix="upload" border round disabled size="small">蓝色按钮</a-button>
        <a-button type="success" suffix="upload2" size="mini">绿色按钮</a-button>
        <a-button type="wraning" min-width="160px">橙色按钮</a-button>
        <a-button type="danger" min-width="160px" border>红色按钮红色按钮红色按钮红色按钮</a-button>
    </div>
    //组件
            <button  
            class="a-button"
            :disabled="disabled" 
            :class="[theme, isBorder, isRound,isSize]"
            :style="[minWidthCss]"
        >
            <span>
                <!-- 前缀 -->
                <i class="iconfont icon-prefix" :class="iconPerfix"></i>
                <slot />
                <!-- 后缀 -->
                <i class="iconfont icon-suffix" :class="iconSuffix"></i>
            </span>
        </button>
        <script>
export default {
    name: "AButton",
    props: {
        perfix: {
            type: String,
            default: ''
        },
        suffix: {
            type: String,
            default: ''
        },
    },
    computed: {
        iconPerfix() {
            return this.perfix ? `icon-${this.perfix}` : ''
        },
        iconSuffix() {
            return this.suffix ? `icon-${this.suffix}` : ''
        },   

    },
    data() {
    return {};
    },
};
</script>

图标三

加一些css样式

 i { width: 14px; height: 14px;}
.icon-prefix { margin-right: 10px; }
.icon-suffix { margin-left: 10px; }

块级按钮

只需要在组件上写block就行了

    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" block perfix="upload" border round disabled size="small">蓝色按钮</a-button>
        <a-button type="success"  suffix="upload2" 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,blockCss]"
        >
            <span>
                <!-- 前缀 -->
                <i class="iconfont icon-prefix" :class="iconPerfix"></i>
                <slot />
                <!-- 后缀 -->
                <i class="iconfont icon-suffix" :class="iconSuffix"></i>
            </span>
        </button>
        
</template>
<script>
export default {
    name: "AButton",
    props: {
        block: Boolean //默认是false
    },
    computed: {  
        blockCss() {
            return this.block ? { 'display': 'block '} : ''
        }
    },
    data() {
    return {};
    },
};
</script>

附完整代码

<template>
    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" block perfix="upload" border round disabled size="small">蓝色按钮</a-button>
        <a-button type="success"  suffix="upload2" 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>
<script>
export default {
    name: 'Home',
    components: {
        'a-button': () => import('@/components/button')
    }
}
</script>

<template>
    
        <button  
            class="a-button"
            :disabled="disabled" 
            :class="[theme, isBorder, isRound,isSize]"
            :style="[minWidthCss,blockCss]"
        >
            <span>
                <!-- 前缀 -->
                <i class="iconfont icon-prefix" :class="iconPerfix"></i>
                <slot />
                <!-- 后缀 -->
                <i class="iconfont icon-suffix" :class="iconSuffix"></i>
            </span>
        </button>
        
</template>
<script>
export default {
    name: "AButton",
    props: {
        type: {
            type: String,
            default: ''
        },
        size: {
            type: String,
            default: ''
        },
        minWidth: {
            type: String,
            default: ''
        },
        perfix: {
            type: String,
            default: ''
        },
        suffix: {
            type: String,
            default: ''
        },
        border: Boolean, //默认是false
        round: Boolean, //默认是false
        disabled: Boolean, //默认是false
        block: Boolean //默认是false
    },
    computed: {
        //主题
        theme() {
            return this.type ? `a-button-${this.type}` : ''
        },
        isSize() {
            return this.size ? `a-button-${this.size}` : ''
        },
        isBorder() {
            return this.border ? `is-border` : ''
        },
        isRound() {
            return this.round ? `is-round` : ''
        },
        minWidthCss() {
            if(!this.minWidth) { return ""}
            return { 'min-width' : this.minWidth }
        },
        iconPerfix() {
            return this.perfix ? `icon-${this.perfix}` : ''
        },
        iconSuffix() {
            return this.suffix ? `icon-${this.suffix}` : ''
        },   
        blockCss() {
            return this.block ? { 'display': 'block '} : ''
        }
    },
    data() {
    return {};
    },
};
</script>
<style lang="less" scoped>
button {
    margin: 15px;
}
.a-button {
    border-width: 1px;
    border-style: solid;
    border-color: #dcdfdc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
    height: 40px;
    span {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
i { width: 14px; height: 14px;}
.icon-prefix { margin-right: 10px; }
.icon-suffix { margin-left: 10px; }
.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;
}
.a-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
.a-button-primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #409eff;
    }
}
.a-button-success {
    background-color: #00d100;
    border-color: #00d100;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #00d100;
    }
}
.a-button-wraning {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #e6a23c;
    }
}
.a-button-danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #f56c6c;
    }
}
.is-round { border-radius: 30px;}
</style>