drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Input clearable position with append slot

Browse source
This commit is contained in:
梁灏 2021-09-07 15:05:47 +08:00
parent 674f7731c2
commit 79ed7e7979
1 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/input/input.vue
View file

@ -2,7 +2,7 @@
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !itemDisabled" @click="handleClear"></i>
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !itemDisabled" @click="handleClear" :style="clearableStyles"></i>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
@ -204,7 +204,8 @@
slotReady: false,
textareaStyles: {},
isOnComposition: false,
showPassword: false
showPassword: false,
clearableIconOffset: 0
};
},
computed: {
@ -279,6 +280,12 @@
}
return (this.value || '').length;
},
clearableStyles () {
const style = {};
let offset = this.clearableIconOffset;
if (offset) style.transform = `translateX(-${offset}px)`;
return style;
}
},
methods: {
@ -396,16 +403,31 @@
setTimeout(() => {
this.$refs.input.setSelectionRange(len, len);
}, 0);
},
handleCalcIconOffset () {
const $el = this.$el.querySelectorAll('.ivu-input-group-append')[0];
if ($el) {
this.clearableIconOffset = $el.offsetWidth;
} else {
this.clearableIconOffset = 0;
}
}
},
watch: {
value (val) {
this.setCurrentValue(val);
},
type () {
this.$nextTick(this.handleCalcIconOffset);
}
},
mounted () {
this.slotReady = true;
this.resizeTextarea();
this.handleCalcIconOffset();
},
updated () {
this.$nextTick(this.handleCalcIconOffset);
}
};
</script>