Comment obtenir la largeur et la hauteur de l'élément immédiatement lors du redimensionnement dans Vue.js

Question

Comment obtenir la largeur et la hauteur de l'élément immédiatement lors du redimensionnement dans Vue.js? Voici mon illustration de stylo de code s'il vous plaît aidez-moi à le changer jusqu'au travail, merci!

Codepen

let app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    boxs: [{ 
 
     width: 100, 
 
     height: 100 
 
     }, 
 
     { 
 
     width: 100, 
 
     height: 100 
 
     } 
 
    ] 
 
    } 
 

 
});

#app { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
.resize { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    resize: both; 
 
    background-color: #C3E2CE; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 
<div id="app"> 
 
    <div v-for="box,key in boxs" class="resize"> 
 
    {{ box.width }} x {{ box.height }} 
 
    </div> 
 
</div>

Answer 1

Pardonnez-moi, mais je suis encore à apprendre Vue aussi bien. Je vous suggère de faire une approche plus modulaire et d'extraire les boîtes, puis en boucle juste combien vous voulez. Veuillez noter que ceci n'est pas une bonne pratique, car la case w/h devrait probablement provenir des accessoires et des données qui sont chargées depuis l'élément racine.

const box = Vue.component("box", { 
 
    template: '<div class="resize">{{ boxWidth }} x {{ boxHeight}}</div>', 
 
    data() { 
 
    return { 
 
     boxWidth: 100, 
 
     boxHeight: 100, 
 
    }; 
 
    }, 
 
    mounted: function() { 
 
    this.$el.addEventListener("mouseup", this.move); 
 
    }, 
 
    methods: { 
 
    move(e) { 
 
     if (e.target == this.$el) { 
 
     this.boxWidth = parseInt(this.$el.style.width); 
 
     this.boxHeight = parseInt(this.$el.style.height); 
 
     } 
 
    } 
 
    } 
 
}); 
 

 
let app = new Vue({ 
 
    el: "#app", 
 
    components: { box: box }, 
 
});

#app { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
.resize { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    resize: both; 
 
    background-color: #C3E2CE; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script> 
 
<div id="app"> 
 
    <div v-for="b in [0,1]"> 
 
     <box></box> 
 
    </div> 
 
</div>

Answer 2

Pour obtenir une rétroaction immédiate qui répond à l'action de modification de taille réelle, vous pouvez essayer d'utiliser un MutationObserver. Vous pouvez l'attacher à un point ref de votre composant et y écouter les mutations. Vous pouvez associer le MutationObserver à la fonction mounted. Assurez-vous également de faire le nettoyage dont vous avez besoin dans la fonction destroyed.

const Resizable = { 
 
    template: "<div ref='main' @resize='onResize' class='resize'>{{dims.width}} | {{dims.height}}</div>", 
 
    data() { 
 
    return { 
 
     dims: { 
 
     width: null, 
 
     height: null 
 
     } 
 
    }; 
 
    }, 
 
    mounted() { 
 
    const { 
 
     width, 
 
     height 
 
    } = this.$refs.main.getBoundingClientRect(); 
 

 
    this.dims.width = width; 
 
    this.dims.height = height; 
 

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

 
      this.dims.width = width; 
 
      this.dims.height = height; 
 
     } 
 
     } 
 
    }; 
 
    const mo = new MutationObserver(mutationHandler); 
 

 
    mo.observe(this.$refs.main, { 
 
     attributes: true, 
 
     childList: true, 
 
     subtree: true 
 
    }); 
 

 
    }, 
 
    methods: { 
 
    onResize() { 
 
     console.log("Resized"); 
 
    } 
 
    } 
 
}; 
 

 
const app = new Vue({ 
 
    el: "#app", 
 
    components: { 
 
    "resizable": Resizable 
 
    }, 
 
    data() { 
 
    return { 
 
     items: [ 
 
     "foo", 
 
     "bar", 
 
     "fizz" 
 
     ] 
 
    } 
 
    } 
 
});

body { 
 
    background-color: #414141; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.resize { 
 
    resize: both; 
 
    margin: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    color: black; 
 
    overflow: scroll; 
 
    background-color: white; 
 
    text-align: center; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 

 
<div id="app"> 
 
    <div class="container"> 
 
    <resizable v-for="item in items" :key="item" class="resize"></resizable> 
 
    </div> 
 
</div>