配置要求
名字 配置字符 作用
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)