从零实现Vue的组件库（十四）- RadioGroup 实现

基于 组件进行二次封装的 RadioGroup 组件

RadioGroup 组件的难点在于：

• radio 与 radioGroup 之间的联动关系、数据绑定关系，使得 radio 可以单独使用或者组合；
• 利用插槽可以方便扩展 radio 。

---

1. 实例

代码

<fat-radio v-model="otherValue" :value="1">
    <fat-hover-tip type="right-center">
        <template slot="hover-part">あらがき ゆいtemplate>
    <template slot="tip-part">
        <img src="/static/img/gakki.jpg" style="width: 100px" alt="示意图">
    template>
    fat-hover-tip>
fat-radio>
<fat-radio v-model="otherValue" :value="2">
    <fat-hover-tip type="right-center">
        <template slot="hover-part">石原さとみtemplate>
        <template slot="tip-part">
            <img
            src="/static/img/u=4046980169,286278015&fm=26&gp=0.jpg"
            style="width: 100px"
            alt="示意图"
            >
        template>
    fat-hover-tip>
fat-radio>

<fat-radio-group v-model="anotherValue">
    <fat-radio :value="1">备选项fat-radio>
    <fat-radio :value="2" disabled>备选项fat-radio>
fat-radio-group>
复制代码

实例地址：RadioGroup 实例

代码地址：Github UI-Library

2. 原理

Radio

首先单独实现 Radio 组件，它是由 label 和 input 两部分构成，主要区分两个状态，checked 以及 disabled 。

复制代码

由于需要实现 Radio 可以单独使用的，所以不采用 provide / inject api，而是利用 this.$parent.$options._componentTag 判断，当前组件是否为 Group。同时实现数据的传递

model: {
    get() {
        return this.isGroup ? this.$parent.value : this.propValue;
    },
    set(newValue) {
        this.isGroup ? this.$parent.$emit("select", newValue) : this.$emit("select", newValue);
    }
}
复制代码

同样，也是依据 isGroup 进行区分，来选择是 $emit 父组件还是子组件。

RadioGroup

则是在 Radio 的外部包裹一层 Group 用于，实现组的概念

<template>
  <div :class="[
            'radio-group'
        ]" name="radio-group">
    <slot>slot>
  div>
template>
<script>
export default {
    name: "radio-group",
    props: {
        value: { type: [String, Number] },
        disabled: { type: Boolean }
    },
    model: {
        prop: "value",
        event: "select"
    },
    watch: {
        value(newValue) {
        this.$emit("change", newValue);
    }
  }
};
复制代码

3. 总结

RadioGroup 组件的开发，主要是父子组件之间的数据传递以及相关的结构分离。

往期文章：

• 从零实现Vue的组件库（零）- 基本结构以及构建工具
• 从零实现Vue的组件库（一）- Toast 实现
• 从零实现Vue的组件库（二）- Slider 实现
• 从零实现Vue的组件库（三）- Tabs 实现
• 从零实现Vue的组件库（四）- File-Reader 实现
• 从零实现Vue的组件库（五）- Breadcrumb 实现
• 从零实现Vue的组件库（六）- Hover-Tip 实现
• 从零实现Vue的组件库（七）- Message-Box 实现
• 从零实现Vue的组件库（八）- Input 实现
• 从零实现Vue的组件库（九）- InputNumber 实现
• 从零实现Vue的组件库（十）- Select 实现
• 从零实现Vue的组件库（十一）- Date-picker 实现
• 从零实现Vue的组件库（十二）- Table 实现
• 从零实现Vue的组件库（十三）- Pagination 实现
• 从零实现Vue的组件库（十四）- RadioGroup 实现
• 从零实现Vue的组件库（十五）- CheckboxGroup 实现

原创声明： 该文章为原创文章，转载请注明出处。