如何在Vue.js中調整大小時立即獲取元素寬度和高度

Question

如何在Vue.js中調整大小時立即獲取元素寬度和高度？ 這是我的代碼筆插圖 請幫我改變它，直到工作，謝謝！

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

原諒我，但我仍然在學習的Vue爲好。我建議你做更多的模塊化方法，並提取框，然後循環多少你想要的。請注意，這不是最佳做法，因爲w/h框應該來自從根元素加載的道具和數據。

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

要獲得響應的實際大小調整動作即時反饋，你可能想使用MutationObserver嘗試。您可以將它附加到組件的ref點，並在那裏偵聽突變。

您可以在mounted函數中附加MutationObserver。請務必在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>