dz-app/components/mx-login-form-item/mx-login-form-item.vue

<template>
    <uv-form-item :prop="prop">
        <template #label>
            <uv-text :text="label" :prefix-icon="icon" v-bind="titleBindings"/>
        </template>
        <uv-input v-model="model[prop]" v-bind="inputBindings" :placeholder="autoPlaceholder"
                  :type="type" @update:modelValue="$emit('update:modelValue', $event)">
            <template v-for="(s, name) in $slots" #[name]>
                <slot :name="name"/>
            </template>
        </uv-input>
    </uv-form-item>
</template>

<script setup>
/*NOTE: 必须设置父级uv-form.labelPosition=`top`来确保该组件的布局*/
import {computed, ref} from 'vue'
import {createPropDefine} from "@/utils";
import {useInjectFormData} from "@/pages/login/components/hooks/useFormDataInjection";

const props = defineProps({
    prop: createPropDefine(''),
    modelValue: createPropDefine(''),
    label: createPropDefine(''),
    placeholder: createPropDefine(''),
    icon: createPropDefine(''),
    type: createPropDefine(undefined)
})
defineEmits(['update:modelValue'])

const [model] = useInjectFormData()
const autoPlaceholder = computed(() => props.placeholder || '请输入' + props.label)
const titleBindings = ref({
    color: 'var(--primary-color)',
    size: 20,
    iconStyle: {
        fontSize: '24px',
        color: 'var(--primary-color)'
    }
})
const inputBindings = ref({
    fontSize: 18,
    clearable: true,
    border: 'bottom',
    customStyle: {padding: '10px 0'}
})

</script>

<style scoped>

</style>