4dkankan-components/packages/components/basic/input/src/input.vue

<template>
    <div class="ui-input">
        <template v-if="type">
            <component :is="InputComponents[type].component" v-bind="childProps" :modelValue="props.modelValue" @update:model-value="newValue => emit('update:modelValue', newValue)">
                <template v-for="(slot, name) in $slots" #[name]="raw">
                    <slot :name="name" v-bind="raw"></slot>
                </template>
            </component>
            <slot></slot>

            <!-- <p class="error-msg" v-if="error">{{ error }}</p> -->
        </template>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { inputProps, InputComponents } from './input'
const props = defineProps(inputProps)
console.log('props', props)

// const emit = defineEmits(['update:modelValue'])
// const type = computed(() => (types[props.type] ? props.type : 'text'))
const childProps = computed(() => {
    if (props.type) {
        console.log('props--type', InputComponents[props.type])
        return InputComponents[props.type].props
    }
    // const retain = Object.keys(types[type.value].propsDesc)
    // const childProps = {}
    // for (let key in props) {
    //     if (retain.includes(key)) {
    //         childProps[key] = props[key]
    //     }
    // }
    // if (!types[props.type]) {
    //     childProps.type = props.type
    // }
    // return childProps
    return false
})

// const style = computed(() => {
//     const style = {}
//     const keys = Object.keys(childProps.value)

//     if (!keys.includes('width')) {
//         style.width = props.width
//     }

//     if (!keys.includes('height')) {
//         style.height = props.height
//     }

//     return style
// })
</script>