<template>
  <label class="custom-radio">
    <input
      type="radio"
      @input="handleClick"
      checked
      :name="groupName"
      :id="`radio-${groupName}`"
    />
    <div class="radio-btn" :style="{ '--size': size + 'px' }"></div>
    <span class="radio-text">{{ text }}</span>
  </label>
</template>
<script setup>
defineProps({
  groupName: {
    type: String,
    required: true
  },
  checked: {
    type: Boolean,
    default: false
  },
  size: {
    type: Number,
    default: 20
  },
  color: {
    type: String,
    default: '#000'
  },
  text: {
    type: String,
    default: ''
  },
  checkSize: {
    type: Number,
    default: 10
  },
  isDisabled: {
    type: Boolean,
    default: false
  }
});

const handleClick = e => {
  console.log('click', e.target.checked);
};
</script>

<style lang="scss" scoped>
.custom-radio {
  @include flex(flex-start);
  input {
    display: none;
  }
  /* 自定义单选按钮外观 */
  .radio-btn {
    display: inline-block;
    width: v-bind('size + "px"');
    height: var(--size);
    border: 1px solid v-bind('color');
    border-radius: 50%;
    position: relative;
    cursor: pointer;
  }
  .radio-text {
    margin-left: 10px;
  }
  input:checked + .radio-btn:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: v-bind('checkSize + "px"');
    height: v-bind('checkSize + "px"');
    background-color: v-bind('color');
    border-radius: 50%;
  }
}
</style>

使用方法：

<h-radio
  v-for="(item, i) in 3"
  :key="i"
  :groupName="'group1'"
  :index="i"
  :text="item"
  :checked="i == 1"
/>