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