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

RadioGroup 组件的难点在于:
  • radioradioGroup 之间的联动关系、数据绑定关系,使得 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 组件,它是由 labelinput 两部分构成,主要区分两个状态,checked 以及 disabled

<template>
  <label
    class="radio"
    :class="[{'is-checked': value === model},
        {'is-disabled': isDisabled}
    ]"
    @click.stop="handleClick"
  >
    <!-- checked 时展示被选中状态 -->
    <span class="radio-inner"></span>
    <input
      class="f-hide"
      type="radio"
      :disabled="isDisabled"
      v-bind="$attrs"
      :value="model"
      @click.stop
    >
    <!-- 提示文案(可插入组件) -->
    <slot></slot>
  </label>
</template>

<script>
export default {
props: {
value: {
type: [String, Number],
required: true
},
disabled: {
type: [Boolean],
default: false
},
propValue: {
type: [String, Number]
}
},
model: {
prop: “propValue”,
event: “select”
},
computed: {
isGroup() {
return this.$parent.$options._componentTag === “fat-radio-group”;
},
isDisabled() {
return this.$parent.disabled || this.disabled;
},
model: {
get() {
return this.isGroup ? this.$parent.value : this.propValue;
},
set(newValue) {
this.isGroup ? this.$parent.$emit(“select”, newValue) : this.$emit(“select”, newValue);
}
}
},
methods: {
handleClick(event) {
!this.isDisabled && (this.model = this.value);
}
}
};
</script>

复制代码

由于需要实现 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.js

    Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。 主要特性: 可扩展的数据绑定 将普通的 JS 对象作为 model 简洁…

    109 引用
感谢    赞同    分享    收藏    关注    反对    举报    ...