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
。
<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 组件的开发,主要是父子组件之间的数据传递以及相关的结构分离。
扫描二维码关注公众号,回复:
5150612 查看本文章
往期文章:
- 从零实现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 实现
原创声明: 该文章为原创文章,转载请注明出处。