### HChecker 組件
介紹：`HChecker` 組件和多選框很像，不同的是，`HChecker` 可以指定選中的個數，而且其樣式經常應用在購物網站中，比如在購買手機時，選擇手機內存容量，顏色等時使用的就是 `HChecker` 組件。
<table>
<caption>HChecker 屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>value</td>
<td>返回選中標簽的值，用 v-model 綁定</td>
<td>Array</td>
<td>[]</td>
</tr>
<tr>
<td>max</td>
<td>指定最多能選中多少個標簽</td>
<td>Number</td>
<td>1</td>
</tr>
<tr>
<td>gutter</td>
<td>每個選項標簽之間的距離，內部實現使用的是 margin-right 屬性</td>
<td>String | Number</td>
<td>0</td>
</tr>
<tr>
<td>defaultBorderColor</td>
<td>未選中時，選項標簽的邊框顏色</td>
<td>String</td>
<td>#ccc</td>
</tr>
<tr>
<td>checkedBorderColor</td>
<td>選中時，選項標簽的邊框顏色</td>
<td>String</td>
<td>#12CC94</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>customStyle</td>
<td>如果你覺得通過以上樣式屬性還不能滿足需求，那么你可以定制你自己的樣式</td>
<td>Object</td>
<td>{}</td>
</tr>
<tr>
<td>checkerItems</td>
<td>用于指定每個選項標簽的基本信息，具體屬性看下表</td>
<td>Array</td>
<td>[]</td>
</tr>
</tbody>
</table>
<table>
<caption>checkerItems 中 item 的屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>title</td>
<td>文本信息</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>代表的值，在標簽選中時，返回該值</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<table>
<caption>HChecker 事件</caption>
<thead>
<th>事件名</th>
<th>說明</th>
<th>返回值</th>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>選中值改變時觸發</td>
<td>包含選中值的數組</td>
</tr>
</tbody>
</table>
示例代碼:
<template>
<div class="checker">
<div class="box">
<span class="text">單選</span>
<HChecker
:checkerItems="items"
v-model="checked"
:gutter="gutter"
:max="max">
</HChecker>
</div>
<div class="box">
<span class="text">單選, 改變選中時的顏色</span>
<HChecker
:checkerItems="items"
v-model="checked"
:gutter="gutter"
checkedBorderColor="#58e"
:max="max">
</HChecker>
</div>
<div class="box">
<span class="text">最多可選 2 個</span>
<HChecker
:checkerItems="items2"
v-model="checked2"
:gutter="gutter"
:max="max2">
</HChecker>
</div>
</div>
</template>
<script>
import { HChecker } from 'vuecomponent'
export default {
data () {
return {
items: [
{ title: 'A', value: 1 },
{ title:'B', value: 2 },
{ title: 'C', value: 3 },
{ title: 'D', value: 4 }
],
items2: [
{ title: 'HTML', value: 1 },
{ title:'CSS', value: 2 },
{ title: 'JavaScript', value: 3 },
{ title: 'Vue', value: 4 }
],
checked: [],
checked2: [],
gutter: 10,
max: 1,
max2: 2,
color: '#fff'
}
},
components: {
HChecker
},
watch: {
checked (val) {
console.log(val)
}
}
}
</script>
<style scoped>
.box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
width: 480px;
margin: 32px auto;
}
</style>
效果示意圖：
