fix: autoResize issue with v-show by implementing ResizeObserver
- Problem: When using v-show to toggle the visibility of the Textarea component, the auto-resize functionality fails because this.$el.offsetParent returns null when the element is hidden. - Solution: Added a ResizeObserver to detect size changes and adjusted the resize logic to handle visibility changes. Now, the Textarea component correctly auto-resizes when it becomes visible and when its content or parent size changes.pull/6630/head
parent
69d0407fe6
commit
3ac1ff77ee
|
@ -15,17 +15,27 @@ export default {
|
||||||
$pcFluid: { default: null }
|
$pcFluid: { default: null }
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.$el.offsetParent && this.autoResize) {
|
if (this.autoResize) {
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
this.resize();
|
this.resize();
|
||||||
|
});
|
||||||
|
this.observer.observe(this.$el);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updated() {
|
updated() {
|
||||||
if (this.$el.offsetParent && this.autoResize) {
|
if (this.autoResize) {
|
||||||
this.resize();
|
this.resize();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onBeforeUnmount() {
|
||||||
|
if (this.observer) {
|
||||||
|
this.observer.disconnect();
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
resize() {
|
resize() {
|
||||||
|
if (!this.$el.offsetParent) return;
|
||||||
|
|
||||||
this.$el.style.height = 'auto';
|
this.$el.style.height = 'auto';
|
||||||
this.$el.style.height = this.$el.scrollHeight + 'px';
|
this.$el.style.height = this.$el.scrollHeight + 'px';
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue