eln_web/src/components/Template/Input.vue

<template>
    <el-input
        v-model="inputValue"
        :maxlength="maxLength"
        :disabled="disabled"
        :readonly="readonly"
        :clearable="clearable"
        :show-password="showPassword"
        :placeholder="placeholder || ('请输入' + label)"
        :class="borderClass"
        @blur="onBlur"
        @focus="onFocus"
        @change="onChange"
        @clear="onClear"
        @keyup.enter="onEnter"
    />
</template>

<script>
export default {
    name: 'CustomInput',
    props: {
        // v-model 值
        value: {
            type: [String, Number],
            default: ''
        },
        // 标签名称
        label: {
            type: String,
            default: ''
        },
        // 最大长度
        maxLength: {
            type: Number,
            default: null
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否只读
        readonly: {
            type: Boolean,
            default: false
        },
        // 是否显示清除按钮
        clearable: {
            type: Boolean,
            default: true
        },
        // 是否显示密码
        showPassword: {
            type: Boolean,
            default: false
        },
        // 占位符
        placeholder: {
            type: String,
            default: ''
        },
        // 边框类型
        fillType: {
            type: String,
            default: '',
            validator: value => {
                return ['', 'actFill', 'green', 'preFill'].includes(value)
            }
        },
        // 输入框尺寸
        size: {
            type: String,
            default: 'default',
            validator: value => {
                return ['large', 'default', 'small'].includes(value)
            }
        }
    },
    data() {
        return {
            inputValue: this.value
        }
    },
    computed: {
        borderClass() {
            const typeMap = {
                actFill: 'orange-border',
                green: 'green-border', 
                preFill: 'blue-border'
            }
            return typeMap[this.fillType] || ''
        }
    },
    watch: {
        value(newVal) {
            this.inputValue = newVal
        },
        inputValue(newVal) {
            this.$emit('input', newVal)
        }
    },
    methods: {
        onBlur(event) {
            this.$emit('blur', event)
        },
        onFocus(event) {
            this.$emit('focus', event)
        },
        onChange(value) {
            this.$emit('change', value)
        },
        onClear() {
            this.$emit('clear')
        },
        onEnter(event) {
            this.$emit('enter', event)
        },
        // 公开方法：清除输入
        clear() {
            this.inputValue = ''
            this.$emit('input', '')
            this.$emit('clear')
        },
        // 公开方法：聚焦
        focus() {
            this.$el.querySelector('input').focus()
        },
        // 公开方法：失焦
        blur() {
            this.$el.querySelector('input').blur()
        }
    },
    filters: {
        getFillType(type) {
            const typeMap = {
                actFill: 'orange-border',
                green: 'green-border',
                preFill: 'blue-border'
            }
            return typeMap[type] || ''
        }
    }
}
</script>

<style lang="scss">
// 基础样式增强
:deep(.el-input) {
    .el-input__inner {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        
        &:focus {
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
    }
}

// 橙色边框样式
.orange-border {
    :deep(.el-input__inner) {
        border-color: #f9c588;

        &:focus {
            border-color: #f9c588;
            box-shadow: 0 0 0 2px rgba(249, 197, 136, 0.2);
        }

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

// 绿色边框样式
.green-border {
    :deep(.el-input__inner) {
        border-color: #67c23a;

        &:focus {
            border-color: #67c23a;
            box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
        }

        &:hover {
            border-color: #67c23a;
        }
    }
}

// 蓝色边框样式
.blue-border {
    :deep(.el-input__inner) {
        border-color: #409eff;

        &:focus {
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        &:hover {
            border-color: #409eff;
        }
    }
}

// 禁用状态样式
:deep(.el-input.is-disabled) {
    .el-input__inner {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
    }
}

// 只读状态样式
:deep(.el-input.is-readonly) {
    .el-input__inner {
        background-color: #fafafa;
        cursor: not-allowed;
    }
}

// 清除按钮样式
:deep(.el-input__clear) {
    color: #909399;
    transition: color 0.2s ease;
    
    &:hover {
        color: #409eff;
    }
}

// 密码显示按钮样式
:deep(.el-input__password) {
    color: #909399;
    transition: color 0.2s ease;
    
    &:hover {
        color: #409eff;
    }
}

// 输入框尺寸样式
:deep(.el-input--large) {
    .el-input__inner {
        height: 40px;
        font-size: 16px;
    }
}

:deep(.el-input--small) {
    .el-input__inner {
        height: 32px;
        font-size: 13px;
    }
}
</style>