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

从图片我们可以看出 button-primary来设置button的主题类型，button-round来设置圆角，button-disbled禁用，接一下我们用vue2做例子演示

定义主题色

<template>
    <div>
        <a-button />
    </div>
</template>
<script>
export default {
    name: 'Home',
    components: {
        'a-button': () => import('@/components/button')
    }
}
</script>

<template>
    <button>默认按钮</button>
</template>
<script>
export default {
    name: 'AButton',
    data() {
        return {
            
        }
    }
}
</script>

<template>
    <button class="a-button a-button-primary">默认按钮</button>
</template>
<script>
export default {
    name: "AButton",
    data() {
    return {};
    },
};
</script>
<style lang="less" scoped>
.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-primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}
.a-button-success {
    background-color: #00d100;
    border-color: #00d100;
    color: #fff;
}
.a-button-wraning {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
}
.a-button-wraning {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
}
</style>

通过改变 a-button-primary 的类名来更改主题色

定义边框

<button class="a-button a-button-primary is-border">默认按钮</button>
.a-button-primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #409eff;
    }
}

通过添加 is-border 属性来设置button的边框

定义禁用

 <button disabled class="a-button a-button-primary is-border">默认按钮</button>
 .a-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

利用 disabled 来设置禁用，并在选中的样式里呈现出来