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