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

自定义主题颜色

我们先直接定义的css抽出来，放到一个文件中

再新建一个scssconfig.scss文件，用于全局变量，在vue.config设置

我们先在button.scss中定义一些默认的变量(!default)

$primary: #409eff !default;
$success: #00d100 !default;
$wraning: #e6a23c !default;
$danger: #f56c6c !default;
$button-space: 10px !default;

由于scssconfig.scss文件处于全局变量，在这个文件中设置会覆盖之前的变量

$primary: red;
$button-space: 30px

附完整代码

//父组件
<template>
    <div>
        <a-button :loading="flag" :before-change="asyncFunction"  min-width="100px" >默认按钮</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>

        
        <a-button>默认按钮</a-button>
        <a-button type="primary">蓝色按钮</a-button>
        <a-button type="success">绿色按钮</a-button>
        <a-button type="wraning">橙色按钮</a-button>
        <a-button type="danger">红色按钮</a-button>
    </div>
</template>
<script>
export default {
    name: 'Home',
    components: {
        'a-button': () => import('@/components/button')
    },
    data() {
        return {
            flag: false
        }
    },
    methods: {
        asyncFunction() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
            },3000)
            })
        },
    }
}
</script>

//子组件
<template>
    
        <button  
            @click="change"
            class="a-button"
            :disabled="disabled || loading || load" 
            :class="[theme, isBorder, isRound,isSize]"
            :style="[minWidthCss,blockCss]"
        >
            <span>
                <!-- 前缀 -->
                <i v-if="loading || load" class="iconfont icon-prefix icon-loading"></i>
                <i v-if="iconPerfix" class="iconfont icon-prefix" :class="iconPerfix"></i>
                <slot />
                <!-- 后缀 -->
                <i v-if="iconSuffix" 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
        loading: Boolean, //默认是false
        beforeChange: Function,
    },
    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 {
        load: false
    };
    },
    methods: {
        change() {
            if(typeof this.beforeChange === 'function') {
                    this.load = true
                this.beforeChange().then(response => {
                    this.load = false
                }).catch(() => {
                    this.load = false
                })
            }
            this.$emit('click')
        }
    }
};
</script>
<style lang="scss" scoped>
@import "./button.scss"
</style>

//button.scss
$primary: #409eff !default;
$success: #00d100;
$wraning: #e6a23c;
$danger: #f56c6c;
$button-space: 10px !default;
$button-round: 30px !default;
button {
    margin: $button-space;
}

.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: $primary;
    border-color: $primary;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: $primary;
    }
}

.a-button-success {
    background-color: $success;
    border-color: $success;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: $success;
    }
}

.a-button-wraning {
    background-color: $wraning;
    border-color: $wraning;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: $wraning;
    }
}

.a-button-danger {
    background-color: $danger;
    border-color: $danger;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: $danger;
    }
}

.is-round {
    border-radius: $button-round;
}

//加载动画
.icon-loading {
    animation: loding 1s infinite linear;
}

@keyframes loding {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(1turn);
    }
}

//scssconfig.scss
$primary: red;
$button-space: 30px