### HRadio 組件
介紹：單選組件，使用場景比較常見，比如個人信息收集中的性別選擇，做題系統中的單項選擇題。為了適應大部分的需求，我為該組件設置了很多屬性，比如可以設置組件的排列方向（水平或者垂直），文字的顏色，是否顯示圖標，圖標的顏色大小等。下面用一張表格來詳細介紹一下：
<table>
<caption>HRadio 屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>value</td>
<td>此值即是選中的值，用 v-model 直接綁定即可</td>
<td>String | Number | Array</td>
<td>-</td>
</tr>
<tr>
<td>direction</td>
<td>決定組件的排列方向,只有兩個可選的值, column 或者 row</td>
<td>String</td>
<td>column</td>
</tr>
<tr>
<td>right</td>
<td>決定單選按鈕的位置，靠左放置或者靠右放置</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>#2c3e50</td>
</tr>
<tr>
<td>border</td>
<td>決定單選按鈕是否有圓形邊框，如果去除則選中時只有一個對勾圖標</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>hrcolor</td>
<td>實際上此組件是一個單選按鈕組，此屬性的作用就是每個單選按鈕框之間的分割線的顏色，如果不想要該分割線，直接指定為 transparent 即可</td>
<td>String</td>
<td>#ccc</td>
</tr>
<tr>
<td>items</td>
<td>指定每一個單選按鈕所需要的數據，最基本的就是 title 和 value 兩個屬性, 具體屬性下面會列一個表來解釋。</td>
<td>Array</td>
<td>[]</td>
</tr>
</tbody>
</table>
<table>
<caption>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>
<tr>
<td>icon</td>
<td>當前按鈕是否需要額外的圖標，如需要，則指定其 type,如不需要，則不設置</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>iconsize</td>
<td>圖標的大小</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>iconcolor</td>
<td>圖標的顏色</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代碼：
<template>
<div class="app-container">
<div class="container">
<HRadio v-model="checked1" :items="items1" :right="right1" :border="border" :direction="direction"></HRadio>
</div>
<div class="container">
<HRadio v-model="checked2" :items="items2" :right="right" :border="border" :direction="direction"></HRadio>
</div>
</div>
</template>
<script>
import { HRadio } from 'vuecomponent'
export default {
components: {
HRadio
},
data () {
return {
checked1: 'i1',
checked2: 't2',
border: true,
items1: [
{ value: 'i1', title: '吃飯' },
{ value: 'i2', title: '睡覺' },
{ value: 'i3', title: '打豆豆' }
],
items2: [
{ value: 't1', title: 'Google Chrome', icon: 'chrome', iconsize: 28, iconcolor: '#46466E' },
{ value: 't2', title: 'Safari', icon: 'safari', iconsize: 28, iconcolor: '#46466E' },
{ value: 't3', title: 'Firefox', icon: 'firefox', iconsize: 28, iconcolor: '#46466E' }
],
right: true,
right1: false,
direction: 'column'
}
}
}
</script>
<style scoped>
.container {
width: 480px;
border: 1px solid #ccc;
margin-bottom: 16px;
border-bottom-style: none;
}
.app-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
</style>
效果示例圖：
