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