dz-app/pages/login/components/register-fields/phone-with-change-field.vue

<template>
    <mx-form-item v-model="model[prop]" :prop="prop" :label="label" :disabled="disabled">
        <template v-if="disabled" #suffix>
            <text class="text-primary ml-5" @click="popup.open()">变更</text>
        </template>
    </mx-form-item>
    <reset-mobile-popup ref="popup"/>
</template>

<script setup>
import {ref} from 'vue'
import {useInjectFormData} from "@/pages/login/components/hooks/useFormDataInjection";
import {createPropDefine} from "@/utils";
import ResetMobilePopup from "@/pages/login/components/reset-mobile-popup.vue";

defineProps({
    prop: createPropDefine('phonenumber'),
    label: createPropDefine('手机号码'),
    disabled: createPropDefine(true, Boolean)
})

const [model] = useInjectFormData()
const popup = ref(null)
</script>

<style scoped>

</style>