vite项目如何模仿el-radio-group和radio封装一个radio和radio-group组件

要实现一个类似于`el-radio-group`和`el-radio`的组件，可以按照以下步骤进行：

1. 创建一个名为`Radio`的单选框组件，并在其中定义一个`value`属性用于指定当前选中的值，以及一个`label`属性用于指定选项的值。

<template>
  <label :class="[disabled ? 'disabled' : '', value === label ? 'checked' : '']">
    <input type="radio" :value="label" :checked="value === label" @click="select" :disabled="disabled"> {{ label }}
  </label>
</template>

<script>
export default {
  name: 'Radio',
  props: {
    value: {
      type: String,
    },
    label: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    select() {
      if (!this.disabled) {
        this.$emit('update:value', this.label);
      }
    },
  },
};
</script>

<style scoped>
label {
  display: inline-block;
  margin-right: 12px;
  cursor: pointer;
}

label.disabled {
  color: #bdbdbd;
  cursor: not-allowed;
}

label.checked {
  color: #409eff;
}
</style>

2. 在`Radio`组件中使用`<template>`标签，定义一个`slot`插槽，并在其中渲染组件的标签、文本等内容。

<template>
  <label :class="[disabled ? 'disabled' : '', value === label ? 'checked' : '']">
    <input type="radio" :value="label" :checked="value === label" @click="select" :disabled="disabled">
    <slot></slot>
  </label>
</template>

3. 在`Radio`组件的`props`中定义一个`disabled`属性，用于禁用当前单选框。

props: {
  value: {
    type: String,
  },
  label: {
    type: String,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
},

4. 创建一个名为`RadioGroup`的单选框组组件，并在其中定义一个`value`属性用于指定当前选中的值，以及一个`options`属性用于指定选项列表。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'RadioGroup',
  props: {
    value: {
      type: String,
    },
    options: {
      type: Array,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

5. 在`RadioGroup`组件中使用`<template>`标签，定义一个`slot`插槽，并在其中渲染多个`Radio`组件。

<template>
  <div>
    <slot>
      <Radio v-for="option in options" :key="option.value" :value="value" :label="option.value" :disabled="disabled">
        {{ option.label }}
      </Radio>
    </slot>
  </div>
</template>

6. 在`RadioGroup`组件的`props`中定义一个`disabled`属性，用于禁用所有单选框。

props: {
  value: {
    type: String,
  },
  options: {
    type: Array,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
},

7. 在`RadioGroup`组件中监听`Radio`组件的`click`事件，并更新`value`属性的值。

<template>
  <div>
    <slot>
      <Radio v-for="option in options" :key="option.value" :value="value" :label="option.value" :disabled="disabled">
        {{ option.label }}
      </Radio>
    </slot>
  </div>
</template>

<script>
import Radio from './Radio';

export default {
  name: 'RadioGroup',
  components: {
    Radio,
  },
  props: {
    value: {
      type: String,
    },
    options: {
      type: Array,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    select(value) {
      if (!this.disabled) {
        this.$emit('input', value);
      }
    },
  },
  watch: {
    value(newValue) {
      this.$emit('update:value', newValue);
    },
  },
};
</script>

8. 在`RadioGroup`组件中使用`v-for`指令遍历`options`属性，并在每次循环中渲染一个`Radio`组件，并将`label`属性设置为当前选项的值。

<template>
  <div>
    <slot>
      <Radio v-for="option in options" :key="option.value" :value="value" :label="option.value" :disabled="disabled" @select="select">
        {{ option.label }}
      </Radio>
    </slot>
  </div>
</template>

9. 最后，在需要使用单选框组件的地方，可以使用`<radio-group>`标签包裹多个`<radio>`标签，即可实现单选框组件的功能。

<template>
  <div>
    <RadioGroup v-model="selected" :options="options" />
  </div>
</template>

<script>
import RadioGroup from './RadioGroup';

export default {
  name: 'App',
  components: {
    RadioGroup,
  },
  data() {
    return {
      selected: 'option1',
      options: [
        {
          label: '选项1',
          value: 'option1',
        },
        {
          label: '选项2',
          value: 'option2',
        },
        {
          label: '选项3',
          value: 'option3',
        },
      ],
    };
  },
};
</script>

需要注意的是，以上步骤仅提供了一个基本的实现思路，具体实现还需要根据实际情况进行调整和完善。