Preface
Vant is a popular UI framework. Among them, the van-radio-group component is a commonly used radio button component, but sometimes we need to customize the package according to project requirements. This article will introduce how to encapsulate the van-radio-group component based on the vue framework . Let's explore it together!
Package file
In this component, the and components vantprovided by the framework are used to implement the function of the radio button. The component accepts three (required or not), (disabled or not) and (option array). In the attribute of the component , two attributes and are defined , which are used to save the value of the selected item and determine whether the status of the selected item needs to be cleared. When the radio button is clicked, the method will be triggered to determine whether to clear the selected items based on the value, and send an update event to the parent component through the method. When the selected item changes, the method will be triggered, and an update event will also be sent to the parent component through the method. When the selected item changes, the method will be triggered, and the event will also be sent to the parent component through the method .van-radio-groupvan-radio props：requireddisabledoptionsdatacheckedcheckRadioFlagclickFncheckRadioFlagemitchangeFnemitchangeFnemitchange
<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>
working with files
This component uses a vRadiocustom component named to implement the function of the radio button. vRadioThe component accepts two props：options(array of options) and direction(arrangement direction of the radio button). In the attribute of the component , two attributes and dataare defined , which are used to save the value of the selected item and the data of the option array respectively. The component receives the and via and passes it to the component and component using the directive. The component also uses to implement two-way binding and save the value of the selected item in the attribute. The function of the radio button is implemented by using the components provided by the framework, and the data of the options and selected items are transferred and saved through the and attributes. At the same time, events and two-way binding are used to implement updates and change notifications of selected items.valueradioListvRadiopropsoptionsdirectionv-bindvan-radio-groupvan-radiovRadiomodel.syncvaluevantpropsdata
<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>
achieve effect
