Input: fix style error when suffix exists with append (#11951)

packages/input/src/input.vue

@@ -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>