实现一个单选组件 Radio 和 RadioGroup

i-radio代码

<template>
    <label>
        <span>
            <input
                    type="radio"
                    :disabled="disabled"
                    @change="change"
                    v-model="value"
                    :value="label">
        </span>
        <slot></slot>
    </label>
</template>

<script>
    import {findBrothersComponents} from "../../../../assets/utils/assist";
    export default {
        name: "i-radio",
        props:{
            label: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            value: {
                type: String,
                default: false
            },

        },
        data(){
            return {
                group: false,
                parent: null
            };
        },
        methods:{
            change(event) {
                /*找到同级radio*/
                let others = findBrothersComponents(this, 'i-radio');
                others.forEach(other => {
                    other.value = '';
                });
                this.$emit('input', this.value);

            }
        }

    }
</script>

<style scoped>

</style>

复制代码

使用 部分代码省略

   <i-form-item label="单选">
                <i-radio v-model="radioModel" label="1">1</i-radio>
                <i-radio v-model="radioModel" label="0">0</i-radio>
                {{radioModel}}
   </i-form-item>
   ...
   data(){
       radioModel: "1",
   }
   
复制代码

转载于:https://juejin.im/post/5d084b06f265da1b94214afc