eln_web/src/components/Template/Input.vue

<template>
    <HandleWrapper v-on="$listeners">
        <el-input
            :maxlength="item.maxlength || 30" 
            :disabled="item.disabled"
            :class="item.borderType | getBorderType"
            :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
            :value = "value"
            @input = "onInput"
        />
    </HandleWrapper>
    
</template>

<script>
import HandleWrapper from './HandleFormItem.vue'
export default {
    components:{
        HandleWrapper
    },
    props:{
        borderType: {
            type: String,
            default: ""
        },
        item:{
            type:Object,
            default:()=>{
                return{
                    placeholder:"",
                    maxlength:30,
                    label:"",
                    disabled:false,
                }
            }
        },
        value:{
            type:String,
            value:"",
        }
    },
    data(){
        return {
            inputValue: this.$attrs.modelValue
        }
    },
    filters: {
        getBorderType(type) {
            const typeObj = {
                orange: "orange-border",
                green: "green-border",
                blue: "blue-border",
            }
            return typeObj[type] || ""
        },

    },
    methods:{
        onInput(val){
            this.$emit("input",val)
        },
    }
}
</script>

<style lang="scss">
.orange-border {
    input {
        border-color: #f9c588;

        &:focus {
            border-color: #f9c588;
        }

        &:hover {
            border-color: #f9c588;
        }
    }

}

.green-border {
    input {
        border-color: green;

        &:focus {
            border-color: green;
        }

        &:hover {
            border-color: green;
        }
    }

}

.blue-border {
    input {
        border-color: #4ea2ff;

        &:focus {
            border-color: #4ea2ff;
        }

        &:hover {
            border-color: #4ea2ff;
        }
    }

}
</style>