github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/11967/head
hetech 2018-07-12 13:27:28 +08:00 committed by Jikkai Xiao
parent 4b04a1c70b
commit b0a80e0eba
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/input/src/input.vue
View File

@ -39,7 +39,7 @@
:aria-label="label" :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> <slot name="prefix"></slot>
<i class="el-input__icon" <i class="el-input__icon"
v-if="prefixIcon" v-if="prefixIcon"
@ -49,8 +49,7 @@
<!-- 后置内容 --> <!-- 后置内容 -->
<span <span
class="el-input__suffix" class="el-input__suffix"
v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon" v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon">
:style="suffixOffset">
<span class="el-input__suffix-inner"> <span class="el-input__suffix-inner">
<template v-if="!showClear"> <template v-if="!showClear">
<slot name="suffix"></slot> <slot name="suffix"></slot>
@ -126,8 +125,6 @@
? '' ? ''
: this.value, : this.value,
textareaCalcStyle: {}, textareaCalcStyle: {},
prefixOffset: null,
suffixOffset: null,
hovering: false, hovering: false,
focused: false, focused: false,
isOnComposition: false, isOnComposition: false,
@ -193,9 +190,6 @@
inputDisabled() { inputDisabled() {
return this.disabled || (this.elForm || {}).disabled; return this.disabled || (this.elForm || {}).disabled;
}, },
isGroup() {
return this.$slots.prepend || this.$slots.append;
},
showClear() { showClear() {
return this.clearable && return this.clearable &&
!this.disabled && !this.disabled &&
@ -294,17 +288,24 @@
} }
}, },
calcIconOffset(place) { calcIconOffset(place) {
const el = this.$el.querySelector(`.el-input__${place}`);
if (!el || el.parentNode !== this.$el) return;
const pendantMap = { const pendantMap = {
'suf': 'append', suffix: 'append',
'pre': 'prepend' prefix: 'prepend'
}; };
const pendant = pendantMap[place]; const pendant = pendantMap[place];
if (this.$slots[pendant]) { 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() { clear() {
this.$emit('input', ''); this.$emit('input', '');
this.$emit('change', ''); this.$emit('change', '');
@ -320,10 +321,11 @@
mounted() { mounted() {
this.resizeTextarea(); this.resizeTextarea();
if (this.isGroup) { this.updateIconOffset();
this.prefixOffset = this.calcIconOffset('pre'); },
this.suffixOffset = this.calcIconOffset('suf');
} updated() {
this.$nextTick(this.updateIconOffset);
} }
}; };
</script> </script>