手写Vue个人组件库———fl-Button

接上文，封装了个人Vue组件库的第一个组件——Button，源码附在了文章末尾，如下是文档使用说明

fl-Button 按钮

常用的操作按钮。

基础用法

基础的按钮用法。

使用type、round、big 、small属性来定义 fl-Button 的样式。

    基本按钮  
    基本按钮 
    基本按钮 
    基本按钮 
    基本按钮 
    基本按钮 


    大型按钮  
    大型按钮 
    大型按钮 
    大型按钮 
    大型按钮 
    大型按钮 


    小型按钮  
    小型按钮 
    小型按钮 
    小型按钮 
    小型按钮 
    小型按钮 


    圆角按钮  
    圆角按钮 
    圆角按钮 
    圆角按钮 
    圆角按钮 
    圆角按钮 

禁用状态

按钮不可用状态。

你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

      基本按钮  
      基本按钮 
      基本按钮 
      基本按钮 
      基本按钮 
      基本按钮 

文字按钮

没有边框和背景色的按钮。

    文本按钮 
    文本按钮 

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info / text	——
round	是否圆角按钮	boolean	——	false
disabled	是否禁用状态	boolean	——	false
big	大型尺寸	boolean	——	false
small	小型尺寸	boolean	——	false

源码：

<template>
    <div>
        <button 
            :class = "type"  
            :style = "changeOtherStyle"  
            :disabled = "isDisabled">
            <slot>按钮</slot>
        </button>
    </div>
</template>

<script>
    export default {
        name:'fl-Button',               //组件名
        props: {
            type: {
                type: String,
                default: ''
            },
        },                 //按钮样式
        computed: {
            changeOtherStyle() {        //attr额外样式
                var otherStyle = {}
                if(this.$attrs.big == ""){
                    otherStyle.width = "120px";
                    otherStyle.height = "50px"
                }
                if(this.$attrs.small == ""){
                    otherStyle.width = "80px";
                    otherStyle.height = "25px"
                }
                if(this.$attrs.round == ""){
                    otherStyle.borderRadius = "40px"
                }
                if(this.$attrs.disabled == "" || this.$attrs.disabled == true){
                    otherStyle.cursor = " no-drop"
                    otherStyle.opacity = "0.5"
                }
                return otherStyle
            },
            isDisabled(){           //是否禁用
                this.$attrs.disabled == "" ? true : false
            }
        },
    }
</script>

<style scoped>
/* 按钮默认样式 */
button{
    border:1px solid #ccc;
    outline: none;
    width:100px;
    height:35px;
    color:black;
    border-radius: 5px;
}
button:hover{
    opacity: 0.8;
    cursor: pointer;
}
/* type传参样式 */
.primary{
    background: rgb(86, 73, 255);
    color:#fff;
}
.success{
    background: rgb(37, 196, 37);
    border:none;
    color:#fff;
}
.info{
    background: rgb(70, 70, 70);
    color:#fff;
}
.warning{
    background:rgb(221, 142, 39);
    color:#fff;
}
.danger{
    background:rgb(209, 32, 32);
    color:#fff;
}
.text{
    background:#fff;
    color:rgb(86, 73, 255);
    border:none;
}

</style>