Vue3单选框（Radio）

可自定义设置以下属性： 

• 单选元素数据（options），类型：Array<{label: string, value: any, disabled?: boolean}>，默认 []

• 是否禁用（disabled），类型：boolean，默认 false

• 是否垂直排列（vertical），仅当 button: false 时生效，类型：boolean，默认 false

• 当前选中的值（v-model:value），类型：any，默认 null

• 多个单选框之间的间距（gap），类型：number，单位 px，默认 8，垂直排列时，间距即垂直间距，，仅当 button: false 时生效

• 是否启用按钮样式（button），类型：boolean，默认 false

• 按钮样式风格（buttonStyle），目前有描边和填色两种风格，类型：'outline' | 'solid'，默认 'outline，仅当 button: true 时生效

• 按钮大小（buttonSize），类型：'default' | 'large' | 'small'，默认 'default'，仅当 button: true 时生效

效果如下图：在线预览

①创建单选框组件Radio.vue 

<script setup lang="ts">
interface Option {
  label: string // 选项名
  value: any // 选项值
  disabled?: boolean // 是否禁用单个单选器
}
interface Props {
  options?: Option[] // 单选元素数据
  disabled?: boolean // 是否禁用
  vertical?: boolean // 是否垂直排列，仅当 button: false 时生效
  value?: any // (v-model) 当前选中的值
  gap?: number // 多个单选框之间的间距，单位px，垂直排列时，间距即垂直间距，仅当 button: false 时生效
  button?: boolean // 是否启用按钮样式
  buttonStyle?: 'outline' | 'solid' // 按钮样式风格
  buttonSize?: 'default' | 'large' | 'small' // 按钮大小，仅当 button: true 时生效
}
const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  disabled: false,
  vertical: false,
  value: null,
  gap: 8,
  button: false,
  buttonStyle: 'outline',
  buttonSize: 'default'
})
const emits = defineEmits(['update:value', 'change'])
function onClick(value: any) {
  if (value !== props.value) {
    emits('update:value', value)
    emits('change', value)
  }
}
</script>
<template>
  <div
    class="m-radio"
    :class="{
      'radio-vertical': !button && vertical,
      'radio-button-solid': buttonStyle === 'solid',
      'radio-button-small': button && buttonSize === 'small',
      'radio-button-large': button && buttonSize === 'large'
    }"
    :style="`gap: ${button ? 0 : gap}px;`"
  >
    <div
      v-if="!button"
      class="m-radio-wrap"
      :class="{ 'radio-disabled': disabled || option.disabled }"
      v-for="(option, index) in options"
      :key="index"
      @click="disabled || option.disabled ? () => false : onClick(option.value)"
    >
      <span class="u-radio" :class="{ 'radio-checked': value === option.value }"></span>
      <span class="u-radio-label">
        <slot :label="option.label">{{ option.label }}</slot>
      </span>
    </div>
    <template v-else>
      <div
        tabindex="0"
        class="m-radio-button-wrap"
        :class="{
          'radio-button-checked': value === option.value,
          'radio-button-disabled': disabled || option.disabled
        }"
        v-for="(option, index) in options"
        :key="index"
        @click="disabled || option.disabled ? () => false : onClick(option.value)"
      >
        <span class="u-radio-label">
          <slot :label="option.label">{{ option.label }}</slot>
        </span>
      </div>
    </template>
  </div>
</template>
<style lang="less" scoped>
.m-radio {
  display: inline-flex;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1;
  .m-radio-wrap {
    height: 100%;
    display: inline-flex; // 设置为flex布局后，所有的子元素都会变成行内块元素
    align-items: flex-start;
    cursor: pointer;
    &:not(.radio-disabled):hover {
      .u-radio {
        border-color: @themeColor;
      }
    }
    .u-radio {
      position: relative;
      /*
        如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
        如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
      */
      flex-shrink: 0; // 默认 1.即空间不足时，项目将缩小
      margin-top: 3px;
      width: 16px;
      height: 16px;
      background: transparent;
      border: 1px solid #d9d9d9;
      border-radius: 50%;
      transition: all 0.3s;
      &::after {
        box-sizing: border-box;
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        display: block;
        width: 16px;
        height: 16px;
        margin-block-start: -8px;
        margin-inline-start: -8px;
        background-color: #fff;
        border-block-start: 0;
        border-inline-start: 0;
        border-radius: 16px;
        transform: scale(0);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        content: '';
      }
    }
    .radio-checked {
      border-color: @themeColor;
      background-color: @themeColor;
      &::after {
        transform: scale(0.375);
        opacity: 1;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      }
    }
    .u-radio-label {
      word-break: break-all;
      padding: 0 8px;
      font-size: 14px;
      line-height: 22px;
      display: inline-block;
    }
  }
  .radio-disabled {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
    .u-radio {
      background-color: rgba(0, 0, 0, 0.04);
      border-color: #d9d9d9;
      cursor: not-allowed;
      &::after {
        transform: scale(0.5);
        background-color: rgba(0, 0, 0, 0.25);
      }
    }
  }
  .m-radio-button-wrap {
    position: relative;
    height: 32px;
    padding-inline: 15px;
    line-height: 30px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-block-start-width: 1px;
    border-inline-start-width: 0;
    border-inline-end-width: 1px;
    cursor: pointer;
    transition:
      all 0.2s,
      box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    &:focus-within {
      box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
    }
    &:first-child {
      border-inline-start: 1px solid #d9d9d9;
      border-start-start-radius: 6px;
      border-end-start-radius: 6px;
    }
    &:not(:first-child)::before {
      position: absolute;
      top: -1px;
      left: -1px;
      display: block;
      width: 1px;
      height: 100%;
      padding-block: 1px;
      box-sizing: content-box;
      background-color: #d9d9d9;
      transition: background-color 0.3s;
      content: '';
    }
    &:last-child {
      border-start-end-radius: 6px;
      border-end-end-radius: 6px;
    }
    &:not(.radio-button-disabled):hover {
      color: @themeColor;
    }
  }
  .radio-button-checked:not(.radio-button-disabled) {
    z-index: 1;
    color: @themeColor;
    background-color: #ffffff;
    border-color: @themeColor;
    &::before {
      background-color: @themeColor;
    }
  }
  .radio-button-disabled {
    color: rgba(0, 0, 0, 0.25);
    background-color: rgba(0, 0, 0, 0.04);
    border-color: #d9d9d9;
    cursor: not-allowed;
  }
  .radio-button-disabled.radio-button-checked {
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.radio-vertical {
  display: inline-flex;
  flex-direction: column;
}
.radio-button-solid {
  .radio-button-checked:not(.radio-button-disabled) {
    color: #fff;
    background-color: @themeColor;
    border-color: @themeColor;
    &:hover {
      color: #fff;
    }
  }
}
.radio-button-small {
  .m-radio-button-wrap {
    height: 24px;
    padding-inline: 7px;
    line-height: 22px;
    &:first-child {
      border-start-start-radius: 4px;
      border-end-start-radius: 4px;
    }
    &:last-child {
      border-start-end-radius: 4px;
      border-end-end-radius: 4px;
    }
  }
}
.radio-button-large {
  .m-radio-button-wrap {
    height: 40px;
    font-size: 16px;
    line-height: 38px;
    &:first-child {
      border-start-start-radius: 8px;
      border-end-start-radius: 8px;
    }
    &:last-child {
      border-start-end-radius: 8px;
      border-end-end-radius: 8px;
    }
  }
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import Radio from './Radio.vue'
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const optionsDisabled = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2,
    disabled: true
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const value = ref(2)
watchEffect(() => {
  console.log('value:', value.value)
})
const radioGap = ref(24)
function onChange(value: any) {
  console.log('change:', value)
}
const sizeOptions = [
  {
    label: 'large',
    value: 'large'
  },
  {
    label: 'default',
    value: 'default'
  },
  {
    label: 'small',
    value: 'small'
  }
]
const buttonSize = ref('default')
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Radio :options="options" v-model:value="value" @change="onChange" />
    <h2 class="mt30 mb10">按钮样式</h2>
    <Radio :options="options" v-model:value="value" button />
    <h2 class="mt30 mb10">填底的按钮样式</h2>
    <Radio :options="options" v-model:value="value" button button-style="solid" />
    <h2 class="mt30 mb10">禁用</h2>
    <Space vertical>
      <Radio :options="options" v-model:value="value" disabled />
      <Radio :options="options" v-model:value="value" button disabled />
    </Space>
    <h2 class="mt30 mb10">禁用选项</h2>
    <Space vertical>
      <Radio :options="optionsDisabled" v-model:value="value" />
      <Radio :options="optionsDisabled" v-model:value="value" button />
      <Radio :options="optionsDisabled" v-model:value="value" button button-style="solid" />
    </Space>
    <h2 class="mt30 mb10">垂直排列</h2>
    <Radio vertical :options="options" v-model:value="value" />
    <h2 class="mt30 mb10">自定义间距</h2>
    <Flex vertical>
      <Slider v-model:value="radioGap" width="50%" />
      <Radio :gap="radioGap" :options="options" v-model:value="value" />
    </Flex>
    <h2 class="mt30 mb10">按钮大小</h2>
    <Space vertical>
      <Radio :options="sizeOptions" v-model:value="buttonSize" />
      <Radio :options="options" v-model:value="value" button :button-size="buttonSize" />
      <Radio :options="options" v-model:value="value" button button-style="solid" :button-size="buttonSize" />
    </Space>
  </div>
</template>