sass预处理mix组件封装

<template>
<button class="fs-button" :class="classes" :type="htmlType" @click.stop="click">
    <div class="box" v-if="!loading">
        <slot></slot><span class="text">{{text}}</span>
    </div>
    
    <fs-circle v-else></fs-circle>
</button>
</template>

<script>
/*
    按钮组件
    @parmas type [String] (red、white, gray)
    @parmas disabled [Boolean] 是否禁止
    @params loading [Boolean] 是否显示加载动画
    @params html-type button 的type类型  ('button', 'submit')
*/
import FsCircle from '../FsCircle/FsCircle.vue'
export default {
    name: "FsButoon",
    props: {
        htmlType: {
            type: String,
            default: "button"
        },
        type: {
            type: String,
            default: "red"
        },
        round: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            required: true
        },
    },
    components: {
        FsCircle
    },
    computed: {
        classes() {
            let str = `fs-button-${this.type}${this.loading?` fs-button-loading`:``}${this.round?` fs-button-round`:``}${this.disabled?` fs-button-disabled`:``}`;
            return str
        }
    },
    methods: {
        click() {
            this.$emit('click')
        }
    }
};
</script>

<style lang="scss" scoped>
.fs-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 40px;
    transition: all 0.3s;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    border-radius: 3px;
    width: 100%;
    .box{
        display:flex;
        align-items: center;
    }
    .fs-circle {
        display: inline-block;
        width: 20px;
        height: 20px;
    }
    &.fs-button-red {
        background: $btnBgColor1;
        &:hover {
            background: $btnBgColor2;
        }
        &.fs-button-loading {
            background: $btnBgColor2;
            opacity: 0.5;
        }
        &.fs-button-disabled {
            color: #fff;
            background: $btnBgColor2;
        }
    }
    &.fs-button-white {
        background: #fff;
        border: 1px solid $borderColor1;
        color: $textColor4;
        &:hover {
            background: $btnBgColor2;
            color: #fff;
            border: 1px solid $borderColor4;
        }
        &.fs-button-loading {
            border: 1px solid $borderColor4;
            background: $btnBgColor2;
            opacity: 0.5;
        }
        &.fs-button-disabled {
            border: 1px solid $borderColor4;
            color: #fff;
            background: $btnBgColor2;
        }
    }
    &.fs-button-gray {
        background: #fff;
        border: 1px solid $borderColor3;
        color: $textColor1;
        &:hover {
            background: $btnBgColor3;
            color: #fff;
        }
        &.fs-button-loading {
            background: $btnBgColor3;
            opacity: 0.5;
        }
        &.fs-button-disabled {
            color: #fff;
            background: $btnBgColor3;
        }
    }
    &.fs-button-round {
        border-radius: 40px;
    }

    &.fs-button-disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

}
</style>