前言
vant 作为一款流行的 ui 框架，其中，van-radio-group 组件是一个常用的单选框组件，但有时我们需要根据项目需求进行定制化封装。本文将介绍如何基于 vue 框架封装 van-radio-group 组件，让我们一起来探索吧！
封装文件
在这个组件中，使用了 vant 框架提供的 van-radio-group 和 van-radio 组件来实现单选框的功能。组件接受三个 props：required（是否必选）、disabled（是否禁用）和 options（选项数组）。在组件的 data 属性中，定义了 checked 和 checkRadioFlag 两个属性，分别用来保存选中项的值和判断是否需要清空选中项的状态。点击单选框时，会触发 clickFn 方法，根据 checkRadioFlag 的值来判断是否清空选中项，并通过 emit 方法向父组件发送更新事件。当选中项发生变化时，会触发 changeFn 方法，同样通过 emit 方法向父组件发送更新事件。当选中项发生变化时，会触发 changeFn 方法，同样通过 emit 方法向父组件发送 change 事件。
<template>
<div>
<van-radio-group v-bind="$attrs" :direction="$attrs.direction" :disabled="disabled" v-model="checked" @change="changeFn">
<van-radio :name="item.name" @click="clickFn" v-for="item in options" :key="item.name">{
{ item.label }}</van-radio>
</van-radio-group>
</div>
</template>
<script>
export default {
props: {
required: {
type: Boolean,
},
disabled: {
type: Boolean,
},
options: {
type: Array,
},
},
data() {
return {
checked: "",
checkRadioFlag: false,
};
},
methods: {
clickFn() {
if (this.checkRadioFlag) {
this.checked = "";
}
this.checkRadioFlag = true;
this.$emit("update:model", this.checked);
},
changeFn() {
this.checkRadioFlag = false;
this.$emit("change", this.checked);
},
},
};
</script>
使用文件
这个组件中使用了一个名为 vRadio 的自定义组件来实现单选框的功能。vRadio 组件接受两个 props：options（选项数组）和 direction（单选框的排列方向）。在组件的 data 属性中，定义了 value 和 radioList 两个属性，分别用来保存选中项的值和选项数组的数据。vRadio 组件通过 props 接收 options 和 direction，并使用 v-bind 指令将其传递给 van-radio-group 组件和 van-radio 组件。vRadio 组件还使用了 model.sync 来实现双向绑定，将选中项的值保存在 value 属性中。通过使用 vant 框架提供的组件来实现单选框的功能，并通过 props 和 data 属性来传递和保存选项和选中项的数据。同时，通过事件和双向绑定来实现选中项的更新和变化的通知。
<template>
<div>
<vRadio :options="radioLsit" :direction="`horizontal`" :model.sync="value" />
</div>
</template>
<script>
import vRadio from "@/components/vRadio/index";
export default {
components: {
vRadio,
},
data() {
return {
value: "",
radioLsit: [
{
name: "1",
label: "是",
},
{
name: "2",
label: "否",
},
],
};
},
};
</script>
实现效果
