基于vue3 setup语法糖封装组件-input实现方案

封装--在components中创建LInput.vue

双向绑定Input

<template>
    <input type="text" :value="modelValue" @input="inputChange">
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
    modelValue: {
        type: String
    }
})

const emit = defineEmits(['inputChange'])

const inputChange = (e) => {
    emit('update:modelValue', e.target.value)
}

</script>

动态修改样式

组件可以传入 bgc 来修改Input背景颜色

<template>
    <div class='input-box'>
        <input type="text" :value="modelValue" @input="inputChange">
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
    modelValue: {
        type: String
    },
    bgc: {
        type: String,
        default: 'fff'
    }
})

const emit = defineEmits(['inputChange'])

const inputChange = (e) => {
    emit('update:modelValue', e.target.value)
}

const bgc = computed(() => '#' + props.bgc)

</script>

<style scoped>
    .input-box{
        width:100px;
        height:50px;
        background-color: v-bind(bgc);
    }
</style>

使用

<l-input v-model="inputValue" :bgc="bgcValue"></l-input>