|
|
@ -1,44 +1,104 @@ |
|
|
<template> |
|
|
<template> |
|
|
<el-form-item :style="{ ...styleObject}" :required="required" |
|
|
<el-form-item |
|
|
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label" |
|
|
:style="{ ...styleObject}" |
|
|
:prop="prop" :rules="rules" > |
|
|
:required="required" |
|
|
|
|
|
:class="[ |
|
|
|
|
|
{ 'column': column }, |
|
|
|
|
|
{ 'w510': addClass == 'w510' }, |
|
|
|
|
|
{ 'w388': addClass == 'w388' }, |
|
|
|
|
|
{ 'client-form-flex': clientFormFlex }, |
|
|
|
|
|
'form-item' |
|
|
|
|
|
]" |
|
|
|
|
|
:label="clientFormFlex ? '' : label" |
|
|
|
|
|
:prop="prop" |
|
|
|
|
|
:rules="rules" |
|
|
|
|
|
> |
|
|
<p v-if="desc" class="desc_right">{{ desc }}</p> |
|
|
<p v-if="desc" class="desc_right">{{ desc }}</p> |
|
|
<el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1" |
|
|
|
|
|
:style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit" |
|
|
|
|
|
@input="$emit('input', $event)" @keydown="handleKeydown" @change="$emit('change', $event)" |
|
|
|
|
|
@blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" > |
|
|
|
|
|
<!-- 自定义前面小图标 --> |
|
|
|
|
|
<template v-slot:prepend> |
|
|
|
|
|
<slot name="prependshow"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-slot:prefix> |
|
|
|
|
|
<slot name="prefix"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
<!-- 清除小图标 --> |
|
|
|
|
|
<template v-slot:suffix> |
|
|
|
|
|
<slot name="suffix"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-slot:append> |
|
|
|
|
|
<slot name="appendshow"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<!-- :error="errorMessage" show-message --> |
|
|
<!-- 统一的输入框渲染 --> |
|
|
|
|
|
<div :class="clientFormFlex ? 'client-form-flex-wrapper' : ''" style="width:100%"> |
|
|
|
|
|
<!-- 特殊样式布局的标签 --> |
|
|
|
|
|
<div v-if="clientFormFlex" class="flex-label"> |
|
|
|
|
|
<div class="label-text">{{ clientFormLabel || label }}</div> |
|
|
|
|
|
<span class="colon">：</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> --> |
|
|
<!-- 输入框容器 --> |
|
|
<!-- <el-button slot="append" v-if="hasBtn" type="primary" @click="$emit('enter',value)">搜索</el-button> --> |
|
|
<div :class="clientFormFlex ? 'flex-input' : ''"> |
|
|
</el-input> |
|
|
<el-input |
|
|
<!-- 单位 --> |
|
|
ref="inputRef" |
|
|
<span class="unit" v-if="unit">{{ unit }}</span> |
|
|
:type="type" |
|
|
|
|
|
v-bind="$attrs" |
|
|
|
|
|
:placeholder="placeholder1" |
|
|
|
|
|
:disabled="disabled" |
|
|
|
|
|
:maxlength="maxlength1" |
|
|
|
|
|
:style="{ width: width, height: height }" |
|
|
|
|
|
:value="inputValue" |
|
|
|
|
|
:minLength="minLength1" |
|
|
|
|
|
:show-word-limit="showWordLimit" |
|
|
|
|
|
@input="$emit('input', $event)" |
|
|
|
|
|
@keydown="handleKeydown" |
|
|
|
|
|
@change="$emit('change', $event)" |
|
|
|
|
|
@blur="$emit('blur', inputValue)" |
|
|
|
|
|
@focus="$emit('focus', inputValue)" |
|
|
|
|
|
> |
|
|
|
|
|
<template v-slot:prepend> |
|
|
|
|
|
<slot name="prependshow"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-slot:prefix> |
|
|
|
|
|
<slot name="prefix"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-slot:suffix> |
|
|
|
|
|
<slot name="suffix"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-slot:append> |
|
|
|
|
|
<slot name="appendshow"></slot> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
<!-- 单位 --> |
|
|
|
|
|
<span class="unit" v-if="unit">{{ unit }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
export default { |
|
|
export default { |
|
|
name: 'GuipInput', |
|
|
name: 'GuipInput', |
|
|
props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder','required', |
|
|
props: { |
|
|
'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit', |
|
|
value: [String, Number], |
|
|
'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'], |
|
|
styleObject: Object, |
|
|
|
|
|
disabled: Boolean, |
|
|
|
|
|
defaultValue: [String, Number], |
|
|
|
|
|
placeholder: String, |
|
|
|
|
|
required: Boolean, |
|
|
|
|
|
maxlength: [String, Number], |
|
|
|
|
|
minLength: [String, Number], |
|
|
|
|
|
clear: Boolean, |
|
|
|
|
|
width: String, |
|
|
|
|
|
height: String, |
|
|
|
|
|
showWordLimit: Boolean, |
|
|
|
|
|
label: String, |
|
|
|
|
|
type: { |
|
|
|
|
|
type: String, |
|
|
|
|
|
default: 'text' |
|
|
|
|
|
}, |
|
|
|
|
|
prop: String, |
|
|
|
|
|
rules: [Object, Array], |
|
|
|
|
|
column: Boolean, |
|
|
|
|
|
addClass: String, |
|
|
|
|
|
desc: String, |
|
|
|
|
|
unit: String, |
|
|
|
|
|
// 新增：控制特殊样式 |
|
|
|
|
|
clientFormFlex: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: false |
|
|
|
|
|
}, |
|
|
|
|
|
// 新增：特殊样式时的自定义标签文本（可选） |
|
|
|
|
|
clientFormLabel: { |
|
|
|
|
|
type: String, |
|
|
|
|
|
default: '' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
inputValue: this.value || this.defaultValue, |
|
|
inputValue: this.value || this.defaultValue, |
|
|
@ -51,35 +111,23 @@ export default { |
|
|
placeholder1: '' |
|
|
placeholder1: '' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选） |
|
|
watch: { |
|
|
// defaultValue(newVal) { |
|
|
|
|
|
// console.log(newVal,'newVal'); |
|
|
|
|
|
// this.inputValue = newVal; |
|
|
|
|
|
// }, |
|
|
|
|
|
value(newVal) { |
|
|
value(newVal) { |
|
|
this.inputValue = newVal; |
|
|
this.inputValue = newVal; |
|
|
}, |
|
|
}, |
|
|
defaultValue(newVal) { |
|
|
defaultValue(newVal) { |
|
|
// 如果没有value但有defaultValue变化时更新 |
|
|
|
|
|
if (!this.value && newVal !== this.inputValue) { |
|
|
if (!this.value && newVal !== this.inputValue) { |
|
|
this.inputValue = newVal; |
|
|
this.inputValue = newVal; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
// 默认值赋值 |
|
|
|
|
|
// if (this.defaultValue != null) { |
|
|
|
|
|
// this.inputValue = this.defaultValue; |
|
|
|
|
|
// } |
|
|
|
|
|
// 默认提示语 |
|
|
|
|
|
if (this.placeholder) { |
|
|
if (this.placeholder) { |
|
|
this.placeholder1 = this.placeholder; |
|
|
this.placeholder1 = this.placeholder; |
|
|
} |
|
|
} |
|
|
// 默认提示语 |
|
|
|
|
|
if (this.maxlength) { |
|
|
if (this.maxlength) { |
|
|
this.maxlength1 = this.maxlength; |
|
|
this.maxlength1 = this.maxlength; |
|
|
} |
|
|
} |
|
|
// 默认提示语 |
|
|
|
|
|
if (this.minLength) { |
|
|
if (this.minLength) { |
|
|
this.minLength1 = this.minLength; |
|
|
this.minLength1 = this.minLength; |
|
|
} |
|
|
} |
|
|
@ -94,76 +142,24 @@ export default { |
|
|
item.onmouseout = function () { |
|
|
item.onmouseout = function () { |
|
|
item.classList.remove("hoverclass") |
|
|
item.classList.remove("hoverclass") |
|
|
} |
|
|
} |
|
|
// item.addEventListener('mouseover',function(){ |
|
|
|
|
|
// console.log('滑过'); |
|
|
|
|
|
// item.classList.add("hoverclass") |
|
|
|
|
|
// }) |
|
|
|
|
|
// item.addEventListener('mouseoout',function(){ |
|
|
|
|
|
// console.log('滑出'); |
|
|
|
|
|
// item.classList.remove("hoverclass") |
|
|
|
|
|
// }) |
|
|
|
|
|
// item.addEventListener('mouseoenter',function(){ |
|
|
|
|
|
// console.log('滑---'); |
|
|
|
|
|
// item.classList.add("hoverclass") |
|
|
|
|
|
// }) |
|
|
|
|
|
// item.addEventListener('mouseoleave',function(){ |
|
|
|
|
|
// console.log('滑出'); |
|
|
|
|
|
// item.classList.remove("hoverclass") |
|
|
|
|
|
// }) |
|
|
|
|
|
}) |
|
|
}) |
|
|
// console.log(el,'====9999'); |
|
|
|
|
|
// if(els&& this.styleObject){ |
|
|
|
|
|
// for(var key in this.styleObject){ |
|
|
|
|
|
// els.style[key] = this.styleObject[key] |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
// input 事件 |
|
|
|
|
|
// changeInput(event){ |
|
|
|
|
|
// this.$emit('input', event); |
|
|
|
|
|
// } |
|
|
|
|
|
// handleClear(){ |
|
|
|
|
|
// console.log('清除---'); |
|
|
|
|
|
// this.$emit('clear', '清楚逻辑') |
|
|
|
|
|
// } |
|
|
|
|
|
handleKeydown(e) { |
|
|
handleKeydown(e) { |
|
|
console.log(e); |
|
|
console.log(e); |
|
|
// if (e.key === '1') { |
|
|
e.preventDefault(); |
|
|
e.preventDefault(); // 阻止默认行为 |
|
|
|
|
|
// } |
|
|
|
|
|
}, |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.unit { |
|
|
.unit { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 12px; |
|
|
right: 12px; |
|
|
/* 根据需要调整位置 */ |
|
|
|
|
|
top: 50%; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
transform: translateY(-50%); |
|
|
pointer-events: none; |
|
|
pointer-events: none; |
|
|
/* 防止单位文本影响输入框的点击事件 */ |
|
|
|
|
|
} |
|
|
} |
|
|
// .custom-form-item { |
|
|
|
|
|
// ::v-deep .el-form-item__content { |
|
|
|
|
|
// display: flex; |
|
|
|
|
|
// flex-direction: column; |
|
|
|
|
|
// align-items: flex-start; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// .input-wrapper { |
|
|
|
|
|
// position: relative; |
|
|
|
|
|
// width: 100%; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// ::v-deep .el-form-item__error { |
|
|
|
|
|
// position: relative; |
|
|
|
|
|
// margin-top: 4px; |
|
|
|
|
|
// padding-top: 0; |
|
|
|
|
|
// line-height: 1; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
</style> |
|
|
</style> |
zq
7 days ago