dz-app/pages/login/components/register-fields/name-gender-fields.vue

<template>
    <mx-form-item v-model="model[propName]" :prop="propName" :label="labelName"/>
    <mx-form-item :prop="propSex" :label="labelSex">
        <uv-radio-group v-model="model[propSex]" class="justify-end gap-20">
            <uv-radio v-for="op in sexOptions" :label="op.text" :name="op.value"/>
        </uv-radio-group>
    </mx-form-item>
</template>

<script setup>
import {useInjectFormData} from "@/pages/login/components/hooks/useFormDataInjection";
import {createPropDefine} from "@/utils";
import mxConfig from "@/common/mxConfig";

defineProps({
    propName: createPropDefine('nickName'),
    propSex: createPropDefine('sex'),
    labelName: createPropDefine('学生姓名'),
    labelSex: createPropDefine('学生性别')
})

const [model] = useInjectFormData()
const sexOptions = mxConfig.sexOptions
</script>

<style scoped>

</style>