mirror of https://github.com/ElemeFE/element
Input: fix style error when suffix exists with append (#11951)
parent
4b04a1c70b
commit
b0a80e0eba
|
@ -39,7 +39,7 @@
|
|||
:aria-label="label"
|
||||
>
|
||||
<!-- 前置内容 -->
|
||||
<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon" :style="prefixOffset">
|
||||
<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
|
||||
<slot name="prefix"></slot>
|
||||
<i class="el-input__icon"
|
||||
v-if="prefixIcon"
|
||||
|
@ -49,8 +49,7 @@
|
|||
<!-- 后置内容 -->
|
||||
<span
|
||||
class="el-input__suffix"
|
||||
v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon"
|
||||
:style="suffixOffset">
|
||||
v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon">
|
||||
<span class="el-input__suffix-inner">
|
||||
<template v-if="!showClear">
|
||||
<slot name="suffix"></slot>
|
||||
|
@ -126,8 +125,6 @@
|
|||
? ''
|
||||
: this.value,
|
||||
textareaCalcStyle: {},
|
||||
prefixOffset: null,
|
||||
suffixOffset: null,
|
||||
hovering: false,
|
||||
focused: false,
|
||||
isOnComposition: false,
|
||||
|
@ -193,9 +190,6 @@
|
|||
inputDisabled() {
|
||||
return this.disabled || (this.elForm || {}).disabled;
|
||||
},
|
||||
isGroup() {
|
||||
return this.$slots.prepend || this.$slots.append;
|
||||
},
|
||||
showClear() {
|
||||
return this.clearable &&
|
||||
!this.disabled &&
|
||||
|
@ -294,17 +288,24 @@
|
|||
}
|
||||
},
|
||||
calcIconOffset(place) {
|
||||
const el = this.$el.querySelector(`.el-input__${place}`);
|
||||
if (!el || el.parentNode !== this.$el) return;
|
||||
const pendantMap = {
|
||||
'suf': 'append',
|
||||
'pre': 'prepend'
|
||||
suffix: 'append',
|
||||
prefix: 'prepend'
|
||||
};
|
||||
|
||||
const pendant = pendantMap[place];
|
||||
|
||||
if (this.$slots[pendant]) {
|
||||
return { transform: `translateX(${place === 'suf' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)` };
|
||||
el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
|
||||
} else {
|
||||
el.removeAttribute('style');
|
||||
}
|
||||
},
|
||||
updateIconOffset() {
|
||||
this.calcIconOffset('prefix');
|
||||
this.calcIconOffset('suffix');
|
||||
},
|
||||
clear() {
|
||||
this.$emit('input', '');
|
||||
this.$emit('change', '');
|
||||
|
@ -320,10 +321,11 @@
|
|||
|
||||
mounted() {
|
||||
this.resizeTextarea();
|
||||
if (this.isGroup) {
|
||||
this.prefixOffset = this.calcIconOffset('pre');
|
||||
this.suffixOffset = this.calcIconOffset('suf');
|
||||
}
|
||||
this.updateIconOffset();
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.$nextTick(this.updateIconOffset);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue