HTML:
<div class="main" ref="main" style="width:200px;height:200px;background:green;">
? ? ? <chatView></chatView>
</div>
CSS:
.main {
? ? resize: both;
? ? overflow: auto;
}
JS:
? ? mounted(){
? ? ? // (1) 定義被觀察的目標(biāo)對象
? ? ? let main=this.$refs.main
? ? ? // (2)定義一個觀察者 觀察 目標(biāo)對象的變化
? ? ? const resizeObserver = new ResizeObserver((entries)=>{
? ? ? ? for(let entry of entries){
? ? ? ? ? console.log(entry.contentRect,'===entrys====')
? ? ? ? }
? ? ? })
? ? ? // (3)觀察者觀察目標(biāo)對象
? ? ? resizeObserver.observe(main);
? ? },