自己用bootstarp的样式封装的vue按钮组件

 配置要求

名字              配置字符                                                                                                                                 作用

state           default、primary、success、info、warning、danger、link                                                  按钮主题

size             xs、sm、md、lg（默认为md）                                                                                            按钮大小

block           true、false                                                                                                                             是否呈现为块元素

 title             随意内容                                                                            可用slot                                       描述按钮作用标题

 assist          辅助内容                                                                             可用slot                                      辅助描述

自定义时间click  在处罚click事件后返回一个自定义click事件可在父组件上接受click事件，返回值e

const btnModule={
    template:`
        <button class="btn" :class="[
            'btn-'+state,
            'btn-'+size,
            {
                'btn-block':block,
            }
        ]" @click="click">
            <slot name="title">
                <strong v-if="title">{{title}}</strong>
            </slot>
           <slot name="assist">
                <span v-if='assist'>{{assist}}</span>
           </slot>
        </button>
    `,
    props:{
        state:{
            type:String,
            default:'default',
        },
        size:{
            type:String
        },
        block:{
            type:Boolean,
            default:false
        },
        title:{
            type:String
        },
        assist:{
            type:String
        }
    },methods:{
        click(e){
            this.$emit("click",e)
        }
    }
}
Vue.component("btnModule",btnModule)