1. 程式人生 > >自己用bootstarp的樣式封裝的vue按鈕元件

自己用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)