webentwicklung-frage-antwort-db.com.de

Holen Sie sich die Elementhöhe mit Vuejs

Ich möchte die Höhe eines Divs ermitteln, um die Höhe eines anderen Div anzupassen. Ich habe die Methode clientHeight verwendet, aber es gibt nicht den guten Wert (kleinerer Wert) zurück. Eigentlich scheint es, eine Höhe zurückzugeben, bevor alle Elemente aufgeladen sind. Nach einigen Recherchen im Internet versuchte ich, window.load () zu verschieben, bis alles aufgeladen ist, aber es funktioniert auch nicht. Einige Ideen ?

mounted () {
  this.matchHeight()
},
matchHeight () {
  let height = document.getElementById('info-box').clientHeight
}
<div class="columns">
  <div class="left-column" id="context">
  <p>Some text</p>
  </div>
  <div class="right-column" id="info-box">
    <img />
    <ul>
      some list
    </ul>
  </div>
</div>

7
Juliane Blier

Die Art, wie Sie es tun, ist in Ordnung. Es gibt jedoch noch einen anderen vue-spezifischen Weg über ein ref-Attribut.

 mounted () {
   this.matchHeight()
 },
 matchHeight () {
   let height = this.$refs.infoBox.clientHeight;
 }


    <div class="columns">
        <div class="left-column" id="context">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"></>
            <img />
            <ul>
                some list
            </ul>
        </div>
    </div>

In diesem Fall ist es völlig egal, ob Sie Ihren ursprünglichen getElementById-Ansatz oder den vue-spezifischen ref-Ansatz verwenden, da Sie nur den Wert erhalten. Wenn Sie jedoch den Wert für das Element festlegen, ist es viel besser, die ref-Methode zu verwenden, damit vue erkennt, dass sich der Wert geändert hat und den Wert möglicherweise nicht mit dem ursprünglichen Wert überschreibt, wenn dieser Knoten im DOM aktualisiert werden muss .

Sie können hier mehr erfahren: https://vuejs.org/v2/api/#vm-refs

Update

Ein paar Leute hatten Kommentare hinterlassen, dass die oben genannte Lösung für sie nicht funktionierte. Diese Lösung lieferte die Konzepte, aber nicht den vollständigen Funktionscode als Beispiel. Daher habe ich meine Antwort um den folgenden Code erweitert, der die Konzepte veranschaulicht. 

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            lines: ['one', 'two','three']
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.clientHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        }
    },
    mounted() {
        this.matchHeight();
    }

});
.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }
<div id="app">
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"> 
            <img />
            <ul>
                <li v-for="line in lines" v-text="line"></li>
            </ul>
        </div>
    </div>

</div>

 <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
 

Hier ist ein Screenshot der Ergebnisse im Browser:

 enter image description here

20
Ron C

Ich würde Flexbox verwenden, um Spalten mit gleicher Höhe zu erzielen https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
   display: flex;
}
.column {
   border: 1px solid;
   padding: 20px;
   width: 150px;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container">
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
            sit amet ornare fringilla, ligula quam faucibus urna
        </div>
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</body>
</html>

1
drimbo