提交 059605c2 编写于 作者: shutao-dc's avatar shutao-dc

update resize-observer.uvue

上级 a7fe3f6c
......@@ -2,8 +2,11 @@
<view>
<text>点击蓝色或红色方块区域会修改元素宽高</text>
<view v-show="boxDisplay" style="align-items: center; justify-content: center; margin: 10px;">
<view style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;" id="outBox" @click="outBoxClick">
<view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox" @click="innerBoxClick"></view>
<view
style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;"
id="outBox" @click="outBoxClick">
<view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox"
@click="innerBoxClick"></view>
</view>
</view>
<button @click="revertBoxSize">还原修改前元素宽高</button>
......@@ -31,38 +34,55 @@
boxDisplay: true,
outBoxElement: null as UniElement | null,
innerBoxElement: null as UniElement | null,
resizeObserver: null as UniResizeObserver | null
}
},
onBackPress() : boolean {
if (this.resizeObserver != null) {
this.resizeObserver!.disconnect()
}
return false
},
onShow() {
const resizeObserver = new UniResizeObserver((entries: Array<UniResizeObserverEntry>) => {
entries.forEach(entry =>{
if(entry.target == this.outBoxElement) {
if (this.resizeObserver == null) {
this.resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
entries.forEach(entry => {
if (entry.target == this.outBoxElement) {
this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
} else if(entry.target == this.innerBoxElement) {
} else if (entry.target == this.innerBoxElement) {
this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
}
})
})
this.outBoxElement = uni.getElementById("outBox")
resizeObserver.observe(this.outBoxElement)
if (this.outBoxElement != null) {
this.resizeObserver!.observe(this.outBoxElement)
}
this.innerBoxElement = uni.getElementById("innerBox")
resizeObserver.observe(this.innerBoxElement)
if (this.innerBoxElement != null) {
this.resizeObserver!.observe(this.innerBoxElement)
}
}
},
methods: {
innerBoxClick() {
this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth+this.offset)
this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth+this.offset)
if (this.innerBoxElement != null) {
this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth + this.offset)
this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth + this.offset)
}
},
outBoxClick() {
this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth+this.offset)
this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth+this.offset)
if (this.outBoxElement != null) {
this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth + this.offset)
this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth + this.offset)
}
},
revertBoxSize() {
if(this.outBoxElement != null) {
if (this.outBoxElement != null) {
this.outBoxElement!.style.setProperty("width", "140px")
this.outBoxElement!.style.setProperty("height", "140px")
}
if(this.innerBoxElement != null) {
if (this.innerBoxElement != null) {
this.innerBoxElement!.style.setProperty("width", "80px")
this.innerBoxElement!.style.setProperty("height", "80px")
}
......@@ -70,14 +90,14 @@
toggleDisplay() {
this.boxDisplay = !this.boxDisplay
},
analysisResizeObserverEntry(entry: UniResizeObserverEntry): string {
analysisResizeObserverEntry(entry : UniResizeObserverEntry) : string {
const contentBoxSize = entry.contentBoxSize[0]
const borderBoxSize = entry.borderBoxSize[0]
const devicePixelContentBoxSize = entry.devicePixelContentBoxSize[0]
return "borderBoxSize: \n{blockSize:"+borderBoxSize.blockSize+", inlineSize:"+borderBoxSize.inlineSize+"}\n"+
"contentBoxSize: \n{blockSize:"+contentBoxSize.blockSize+", inlineSize:"+contentBoxSize.inlineSize+"}\n"+
"devicePixelContentBoxSize: \n{blockSize:"+devicePixelContentBoxSize.blockSize+", inlineSize:"+devicePixelContentBoxSize.inlineSize+"}\n"+
"contentRect: \n{x:"+entry.contentRect.x+", y:"+entry.contentRect.y+", width:"+entry.contentRect.width+", height:"+entry.contentRect.height+"}"
return "borderBoxSize: \n{blockSize:" + borderBoxSize.blockSize + ", inlineSize:" + borderBoxSize.inlineSize + "}\n" +
"contentBoxSize: \n{blockSize:" + contentBoxSize.blockSize + ", inlineSize:" + contentBoxSize.inlineSize + "}\n" +
"devicePixelContentBoxSize: \n{blockSize:" + devicePixelContentBoxSize.blockSize + ", inlineSize:" + devicePixelContentBoxSize.inlineSize + "}\n" +
"contentRect: \n{x:" + entry.contentRect.x + ", y:" + entry.contentRect.y + ", width:" + entry.contentRect.width + ", height:" + entry.contentRect.height + "}"
}
}
}
......@@ -87,6 +107,7 @@
.info-item {
flex-direction: row;
}
.info-text {
font-size: 14px;
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册