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