### HButton 组件
介绍：为了方便，此组件可自定义高度宽度，边框颜色，边框圆角等属性，你可以根据自己的需要定义自己的按钮。
<table>
<caption>HButton 属性</caption>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>按钮是否禁用，如果禁用则按钮样式变成灰色且点击事件不可用</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>text</td>
<td>按钮上显示的文字</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>width</td>
<td>按钮的宽度</td>
<td>String | Number</td>
<td>240</td>
</tr>
<tr>
<td>height</td>
<td>按钮的高度</td>
<td>String | Number</td>
<td>48</td>
</tr>
<tr>
<td>bgcolor</td>
<td>按钮的背景颜色</td>
<td>String</td>
<td>#FFF</td>
</tr>
<tr>
<td>color</td>
<td>按钮字体的颜色</td>
<td>String</td>
<td>#333</td>
</tr>
<tr>
<td>bordercolor</td>
<td>按钮边框的颜色</td>
<td>String</td>
<td>#ccc</td>
</tr>
<tr>
<td>radius</td>
<td>String | Number</td>
<td>边框圆角</td>
<td>6</td>
</tr>
</tbody>
</table>
<table>
<caption>HButton 事件</caption>
<thead>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</thead>
<tbody>
<tr>
<td>onClick</td>
<td>点击时触发</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代码：
<template>
<div class="button-container">
<div class="row">
<HButton :width="smallwidth" :height="smallheight" :text="text"></HButton>
<HButton :width="mediumwidth" :height="mediumheight" :text="text"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :radius="largeheight"></HButton>
</div>
<div class="row">
<HButton :width="smallwidth" :height="smallheight" :text="text" :bgcolor="bgcolor1" :color="color" :bordercolor="bgcolor1"></HButton>
<HButton :width="mediumwidth" :height="mediumheight" :text="text" :bgcolor="bgcolor1" :color="color" :bordercolor="bgcolor1"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :bgcolor="bgcolor1" :color="color" :bordercolor="bgcolor1"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :radius="largeheight" :bgcolor="bgcolor1" :color="color" :bordercolor="bgcolor1"></HButton>
</div>
<div class="row">
<HButton :width="smallwidth" :height="smallheight" :text="text" :bgcolor="bgcolor2" :color="color" :bordercolor="bgcolor2"></HButton>
<HButton :width="mediumwidth" :height="mediumheight" :text="text" :bgcolor="bgcolor2" :color="color" :bordercolor="bgcolor2"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :bgcolor="bgcolor2" :color="color" :bordercolor="bgcolor2"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :radius="largeheight" :bgcolor="bgcolor2" :color="color" :bordercolor="bgcolor2"></HButton>
</div>
<div class="row">
<HButton :width="smallwidth" :height="smallheight" :text="text" :disabled="disabled"></HButton>
<HButton :width="mediumwidth" :height="mediumheight" :text="text" :disabled="disabled"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :disabled="disabled"></HButton>
<HButton :width="largewidth" :height="largeheight" :text="text" :radius="largeheight" :disabled="disabled"></HButton>
</div>
</div>
</template>
<script>
import { HButton } from 'vuecomponent'
export default {
components: {
HButton
},
data () {
return {
smallwidth: '64',
smallheight: '24',
mediumwidth: '128',
mediumheight: '32',
largewidth: '192',
largeheight: '36',
text: 'Button',
bgcolor1: '#F03861',
bgcolor2: '#1FAD9F',
color: '#FFF',
disabled: true
}
},
methods: {
onclick () {
console.log('click')
}
}
}
</script>
<style scoped>
.button-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.row {
width: 720px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-bottom: 24px;
}
</style>
效果示意图：
