Button组件-实现基本功能（Vue-UI组件库）

组件有添加新成员了，他就是基本的button,不做过多详述，仅仅记录一下防止忘记
暂时的功能：
1.输入size选择button组建的大小
2.输入样式改变button组件的颜色
3.一些基本的样式

<template>
    <div>
        <div
        :class="['zypc-button',btSize,btType]"
        >
            <span><slot></slot></span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            buttonClass: 'zypc-button'
        }
    },
    props: ["size","type"],
    computed:{
        btSize:function(){
            return `${this.buttonClass}-${this.size}`
        },
        btType:function(){
            return `${this.buttonClass}-${this.type}`
        }
    }
}
</script>

<style lang="">
.zypc-button {
    padding:4px 25px; 
    margin:0px;
    border-radius: 10px;
    display:inline-block;  
    overflow:hidden;
    height: 32px;
    line-height:28px;
    background: rgb(45,183,245);
    color: white;
}
:hover.zypc-button {
    background: rgba(45,183,245,0.8);
    cursor: pointer;
}

/* 按钮大小 */
.zypc-button-small {
    height: 32px;
    line-height:28px;
}
.zypc-button-large {
    padding:4px 35px; 
    height: 45px;
    line-height: 41px;
}

/* 确认，蓝色按钮 */
.zypc-button-blue {
    background: rgb(45,183,245);
    color: white;
}
:hover.zypc-button-blue {
    background: rgba(45,183,245,0.8);
    cursor: pointer;
}

/* 错误，红色按钮 */
.zypc-button-error {
    background: rgb(235, 0, 18);
    color: white;
}
:hover.zypc-button-error {
    background:rgba(235, 0, 18,0.8);
    cursor: pointer;
}

/* 通过，绿色按钮 */
.zypc-button-success {
    background: rgb(127, 174, 66);
    color: white;
}
:hover.zypc-button-success {
    background: rgba(127, 174, 66, 0.8);
    cursor: pointer;
}
</style>