You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
5.3 KiB
258 lines
5.3 KiB
<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>
|