vue自定义组件之单选框组件

由于原生的单选框的样式太丑，在网页中使用与整体的样式不搭配。因此需要自定义样式

实现功能

1. 自定义v-model，使组件之间数据能够进行双向绑定。
2. 使用disabled属性禁用radio。
3. 使用label属性定义radio的值。
4. 当用户点击radio时触发组件上绑定的change事件。

代码实现

1. template

<template>
  <label role="radio" aria-checked="true" class="lg-radio"
  :class="{'checked': checked, 'disabled': disabled}">
    <span class="lg-radio__icon"></span>
    <input type="radio" ref="radio" class="lg-radio__original" :value="label" @click="select"
    :disabled='disabled'>
    <span class="lg-radio__label">
      <slot></slot>
    </span>
  </label>
</template>

2. script

<script>