lv-components/docs/.vuepress/components/lv-button.vue

<template>
    <button
        class="lv-button"
        :class="['lv-type-' + type, round ? 'round' : '', hand ? 'hand' : '', size]"
        :style="styleObject"
        @click="handleClick">
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: 'lv-button',
    props: {
        type: {
            type: String,
            default: 'default'
        },
        round: {
            type: Boolean,
            default: false
        },
        hand: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'medium'
        },
        bgColor: String,
        fontColor: String,
    },
    data () {
        return {
            styleObject: {}
        }
    },
    mounted() {
        if (this.bgColor) {
            this.$set(this.styleObject, 'background-color', this.bgColor);
            this.$set(this.styleObject, 'border-color', this.bgColor);
        }
        if (this.fontColor) {
            this.$set(this.styleObject, 'color', this.fontColor);
        }
    },
    methods: {
        handleClick(env) {
            this.$emit('click', env)
        }
    }
}
</script>

<style lang="less" scope>
@import url('../public/less/color');
.lv {
    &-button {
        border: 0;
        margin: 0;
        color: @black;
        font-size: var(--main_font_size, 14px);
        user-select: none;
        padding: 6px 20px;
        border: solid 1px @border;
        background-color: @white;
        margin: 0 2px;
        &.round {
            border-radius: 20px;
        }
        &.hand {
            cursor: pointer;
        }
        &.small {
            padding: 3px 10px;
        }
        &.big {
            padding: 10px 20px;
        }
        &[disabled] {
            opacity: .5;
        }
    }
    &-type-primary {
        color: @white;
        border: solid 1px @primary;
        background-color: @primary;
    }
    &-type-success {
        color: @white;
        border: solid 1px @success;
        background-color: @success;
    }
    &-type-info {
        color: @white;
        border: solid 1px @info;
        background-color: @info;
    }
    &-type-warning {
        color: @white;
        border: solid 1px @warning;
        background-color: @warning;
    }
    &-type-danger {
        color: @white;
        border: solid 1px @danger;
        background-color: @danger;
    }
}
</style>