Question 190438 in CSS Question posted in
Some basic documentation can be found here.

Css – How to detect the real-time height change of div1 in Vue3 and get the height of div1 minus 12px for div2?

I have a problem that I can’t solve.
How can I detect the real-time height change of div1 in Vue3 and obtain the height of div1 minus 12px for div2?

If div1 contains multiple lines of text and its height expands from 100px to 150px, how can I obtain the value of 150px – 12px = 138px for div2 and assign a height of 138px to div2?

enter image description here

I apologize for any confusion caused. English is not my primary language. If you have any questions, please let me know.

Best regards.

I can capture the initial height, but I cannot capture it in real-time when it changes height.

Tags:

2

Answers


  1. 0 
    <script>
   import { ref } from 'vue'

   const input = ref(null);
   const second = ref(null);

   var height = 0; // to store first div height
   var height2 = 0; // to store second div height
   watchEffect(() => {
       const observer = new ResizeObserver(() => {
          height = (input.current || {}).clientHeight || 0;
          if (height > 0) height2 = height - 12;
       });
   });

</script>

<template>
  <div1 ref = "input" />
  <div2 ref = "second" />
</template>

    Here is a workaround for your problem. The ResizeObserver calculates the height when the text inside the div changes. To Listen to this event watchEffect is being used to keep track of it. I hope this will work for you. I don’t work on vue but gave it a try similar to react. So, apologize if there is any mistake.

    Login or Signup to reply.
  2. 0

    I don’t see the picture!!

    Use MutationObserver:

    <script setup>
import {
    ref,
    watch,
  onBeforeUnmount
} from 'vue'

const heightDiv1 = ref(0)
const mutationHandler = mutationList => {
    for (let mutation of mutationList) {
        if (mutation.type === "attributes") {
            const {
                height
            } = mutation.target.getBoundingClientRect();

            heightDiv1.value = height
        }
    }
};
const mo = new MutationObserver(mutationHandler);
onBeforeUnmount(() => mo.disconnect())

const div1Ref = ref()
watch(div1Ref, (div1Ref) => {
    if (!div1Ref) return
    heightDiv1.value = div1Ref.getBoundingClientRect().height

    mo.observe(div1Ref, {
        attributes: true,
        childList: true,
        subtree: true
    });
})
</script>

<template>
  <div ref="div1Ref" class="div1">
    div 1
    <textarea />
  </div>
  Height div 1: {{heightDiv1}}
  <div :style="{ height: heightDiv1 - 12 + 'px'}" class="div2">
    div 2
  </div>
</template>

<style scoped>
  .div1 {
    background: red
  }
  .div2 {
    background: blue
  }
</style>

    Preview: https://play.vuejs.org/#eNp1U8uO2zAM/BXWlzjo1mlydOMA3fawhxYFFuhNFz/oRKgtGTKd3YXhfy/1sOMU20MSiRwNOUNmjL52XXIdMEqjY18a2RH0SEN3Ekq2nTYEo1CCDNYP9vclp/LCJwCtHrHWBn+rVg+KhJqgNrqFDZNtGKpKrXqCC8rzhb7L6x4yYJb483ZOtQPlJLV6ylXVoOH8HPkhOZ2dfGkuAnGDNzzo+g659ThBsoZ4TiT01iFkWQYiyomMLAbCXkQLWJDvYrkK8r3O92nVUEK5OSMl/HlktZVU52+NREXPWFK8/WL1rjms3uSaNwO3ECzwgMn+8NfET4ILmiEKX+BnqPWr6NFc0SxSgj+2yj+mx/HW2tTqpJI90ynXDRs8k1fcxzPWwXpOuPnFIfwA88nROCeshx+WqOFVME7bO7oC6n+mJItufs4taq/rVjw4f5tOCmQGdHvG07nIprLjvYv2Q8G7iD7mvLS2TKzsuPPry4vLF8K2a3JCvgEcuaQ1IBNRKC4iKJu870NERA4HVhLs/ZEpXnnqmMPOk+w46U5PTpfHpjCON2smnmwol/b01iDzj2H+6fqv8An2B/gIm+51M933crjr5bCufNytVPHVVQCee4eVe8NbwNxsq31e5OWfs7FzSVl7ZYOuOws6vAcqeKoBxV5a7lM0/QX5snT1

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search