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

前言

vant 作为一款流行的 ui 框架,其中,van-radio-group 组件是一个常用的单选框组件,但有时我们需要根据项目需求进行定制化封装。本文将介绍如何基于 vue 框架封装 van-radio-group 组件,让我们一起来探索吧!


封装文件

在这个组件中,使用了 vant 框架提供的 van-radio-groupvan-radio 组件来实现单选框的功能。组件接受三个 props:required(是否必选)、disabled(是否禁用)和 options(选项数组)。在组件的 data 属性中,定义了 checkedcheckRadioFlag 两个属性,分别用来保存选中项的值和判断是否需要清空选中项的状态。点击单选框时,会触发 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 属性中,定义了 valueradioList 两个属性,分别用来保存选中项的值和选项数组的数据。vRadio 组件通过 props 接收 optionsdirection,并使用 v-bind 指令将其传递给 van-radio-group 组件和 van-radio 组件。vRadio 组件还使用了 model.sync 来实现双向绑定,将选中项的值保存在 value 属性中。通过使用 vant 框架提供的组件来实现单选框的功能,并通过 propsdata 属性来传递和保存选项和选中项的数据。同时,通过事件和双向绑定来实现选中项的更新和变化的通知。

<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>

实现效果

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值