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
KumJungMin 2024-10-23 21:18:23 +09:00
parent 69d0407fe6
commit 3ac1ff77ee
1 changed files with 13 additions and 3 deletions

View File

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