vue封装Radio单选组件(有禁用选项、默认选项的单选框)

1.效果展示

2.组件代码

radio.vue代码：

<template>
  <div class="radio">
    <label class="title">{
   {
   title}}</label>
    <a href="#"
       v-for="(item, index) in options"
       :key="index"
       class="radioLink">
      <div class="radioList">
        <div class="radioArea">
          <label>
            <span>
              <input type="radio"
                     :value="typeof item == 'string' ? item : item.value"
                     class="radioInput"
                     v-model="selectedValue"
                     :disabled="typeof item == 'string' ? false : item.disabled == true ? true :false">
              <span class="radioSelect"
                    :class="typeof item == 'string' ? '' : item.disabled == true ? 'radioSelectDisabled' : '' "></span>
            </span>
            <span class="selectListItem">{
   {
   typeof item == 'string' ? item : item.label}}</span>
          </label>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
   
  name: 'radio',
  data () {
   
    return {
   
      selectedValue: '&