Skip to content
Permalink
Browse files
Input: fix style error when suffix exists with append (#11951)
  • Loading branch information
ziyoung authored and jikkai committed Jul 12, 2018
1 parent 4b04a1c commit b0a80e0eba62baa6ebae047cbbfa394385534523
Showing 1 changed file with 18 additions and 16 deletions.
@@ -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>

0 comments on commit b0a80e0

Please sign in to comment.