闲暇之余写了一个input组件

<template>
    <div class="ui-input">
        <div class="title">
            <span>{{ title }}</span>
        </div>
        <div class="value">
            <textarea
                v-if="type == 'textarea'"
                class="textarea"
                :value="modelValue"
                :rows="rows"
                :placeholder="placeholder"
                @input="inputHandler"
                @focus="focusHandler"
                @blur="blurHandler"
            />
            <input v-else
                   :type="type"
                   password
                   :value="modelValue"
                   class="input"
                   :placeholder="placeholder"
                   :disabled="disabled"
                   autocomplete="off"
                   @input="inputHandler"
                   @focus="focusHandler"
                   @blur="blurHandler"
            >
        </div>
    </div>
</template>

const props = withDefaults(
    defineProps<{
        rows?: string,
        title?: string,
        type?: string,
        disabled?: boolean,
        placeholder?: string,
        modelValue?: any
    }>(),
    {
        rows: '',
        title: '',
        type: 'text',
        disabled: false,
        placeholder: '',
        modelValue: ''
    }
)
const emits = defineEmits<{
    (e: 'update:modelValue', modelValue: any): void,
    (e: 'change', modelValue: any): void,
    (e: 'blur', modelValue: any): void,
    (e: 'focus', modelValue: any): void
}>()
const inputEl = ref()
const controlChange: any = inject('usuuu', '')
const controlChangeEvent = (val: any, type?: string) => {
    controlChange && controlChange(val, type)
}
const blurHandler = (e: Event) => {
    emits('blur', e)
    const { value } = e.target as HTMLInputElement
    controlChangeEvent(value as any, 'blur' as string)
}
const focusHandler = (e: Event) => {
    emits('focus', e)
    const { value } = e.target as HTMLInputElement
    controlChangeEvent(value, 'focus')
}
const inputHandler = (e: Event) => {
    const { value } = e.target as HTMLInputElement
    emits('update:modelValue', value)
    controlChangeEvent(value, 'change')
}
const focus = () => {
    inputEl.value.focus()
}
const blur = () => {
    inputEl.value.blur()
}
watch(() => props.modelValue, (v: any) => { 
    controlChangeEvent(v, 'mounted')
})
onMounted(() => {
    controlChangeEvent(props.modelValue, 'mounted')
})
defineExpose({ blur, focus })

.ui-input {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    line-height: 24px;
    background-color: #fff;
    &:after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 16px;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        transform: scaleY(.5);
    }
    .title {
        width: 6.2em;
        font-size: 13px;
        flex: none;
        margin-right: 12px;
        box-sizing: border-box;
        text-align: left;
        word-wrap: break-word;
    }
    .value {
        font-size: 13px;
        .input {
            display: block;
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            margin: 0;
            padding: 0;
            color: #707070;
            line-height: inherit;
            text-align: left;
            border: 0;
            resize: none;
            user-select: auto;
            background-color: transparent;
        }
        .input::-webkit-input-placeholder {
            color: #c8c9cc
        }
        .input::placeholder {
            color: #c8c9cc
        }
    }
    .textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        color: #747474;
        line-height: inherit;
        text-align: left;
        background-color: transparent;
        border: 0;
        resize: none;
        user-select: auto;
    }
    .textarea::-webkit-input-placeholder {
        color: #c8c9cc
    }
    .textarea::placeholder {
        color: #c8c9cc
    }
}

<ui-input v-model="vlaue" title="邮箱" placeholder="请输入邮箱" />
<ui-input v-model="vlaue" title="密码" type="password" placeholder="请输入密码" />
<ui-input v-model="vlaue" title="禁用" disabled placeholder="禁用不可输入" />
<ui-input v-model="vlaue" title="textarea" type="textarea" rows="3" placeholder="textarea" />