### HChecklist 组件
介绍: `HChecklist` 就是复选框组件，在网页中用的多的是 `direction` 为 `row` 的复选框，不过原生的复选框太丑了，所以将此使用率较高的组件封装起来以供以后使用。
<table>
<caption>HChecklist 属性</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>items</td>
<td>指定每个复选框所需要的数据，其中最基本的属性是 title 和 value</td>
<td>Array</td>
<td>[]</td>
</tr>
<tr>
<td>right</td>
<td>复选框在 title 左侧还是右侧（一个复选框组件的行首或行末）, true 表示在右侧，反之则表示在左侧</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>size</td>
<td>决定复选框的尺寸大小，选中时的图标也会随这个属性而改变</td>
<td>String | Number</td>
<td>24</td>
</tr>
<tr>
<td>color</td>
<td>复选框边框的和选中时图标的颜色</td>
<td>String</td>
<td>#333</td>
</tr>
<tr>
<td>type</td>
<td>复选框的形状，rect 代表矩形，circle 代表圆形</td>
<td>String</td>
<td>rect</td>
</tr>
<tr>
<td>direction</td>
<td>复选框的排列方向，column 说明各复选框项纵向排列，row 说明各复选框项横向排列</td>
<td>String</td>
<td>column</td>
</tr>
<tr>
<td>hrcolor</td>
<td>当复选框纵向排列时，你可能需要分隔线来分隔开不同的项, 此属性用于设置分隔线的颜色</td>
<td>String</td>
<td>transparent</td>
</tr>
</tbody>
</table>
<table>
<caption>items 属性</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>
示例代码：
<template>
<div class="container">
<div class="checklist">
<HChecklist
:items="items"
:right="!right"
:hrcolor="hrcolor"
:type="type"
v-model="value"
@onClick="clickHandler"
:color="color"></HChecklist>
</div>
<div class="checklist">
<HChecklist
:items="items"
:right="right"
:hrcolor="hrcolor"
v-model="value"
@onClick="clickHandler"
:color="color"></HChecklist>
</div>
<div class="checklist">
<HChecklist
:items="items"
:right="right"
v-model="value"
:type="type"
direction="row"
@onClick="clickHandler"
:color="color"></HChecklist>
</div>
<div class="checklist">
<HChecklist
:items="items"
:right="right"
v-model="value"
direction="row"
@onClick="clickHandler"
:color="color"></HChecklist>
</div>
</div>
</template>
<script>
import HChecklist from 'vuecomponent'
export default {
components: {
HChecklist
},
data () {
return {
items: [
{ title: 'CSS3', value: 'item1' },
{ title: 'ES6', value: 'item2' },
{ title: 'Node', value: 'item3' }
],
right: false,
value: [ 'item1' ],
color: '#46466E',
type: 'circle',
hrcolor: '#ccc'
}
},
methods: {
clickHandler () {
console.log(this.value)
}
}
}
</script>
<style scoped>
.container {
display: flex;
flex-flow: row wrap;
}
.checklist {
width: 480px;
margin: 24px auto;
}
</style>
效果示例图：
