提升前端开发效率：基于vue的van-radio-group组件封装指南

水星记_

已于 2025-03-08 11:32:19 修改

阅读量3.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：组件封装文章标签：前端 vue

于 2023-09-18 09:27:21 首次发布

本文链接：https://blog.csdn.net/Shids_/article/details/131516862

组件封装专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何基于Vue框架对Vant的van-radio-group组件进行定制封装，通过props和data管理选项和选中状态，利用事件处理函数实现双向通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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>