### 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>
效果示意圖：
