Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5321
Star 74
Fork 143
H
hello uni-app x

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 059605c2 编写于 作者: shutao-dc's avatar shutao-dc
浏览文件
操作

update resize-observer.uvue

上级 a7fe3f6c
隐藏空白更改
内联 并排
Showing with 111 addition and 90 deletion
pages/API/resize-observer/resize-observer.uvue
浏览文件 @ 059605c2
<template>
<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>
</view>
<button @click="revertBoxSize">还原修改前元素宽高</button>
<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
<view>
<text class="info-text">蓝色方块元素:</text>
<view class="info-item">
<text class="info-text">{{outBoxSizeInfo}}</text>
</view>
<text class="info-text" style="margin-top: 20px;">红色方块元素:</text>
<view class="info-item">
<text class="info-text">{{innerBoxSizeInfo}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
outBoxSizeInfo: "",
innerBoxSizeInfo: "",
offset: 2,
boxDisplay: true,
outBoxElement: null as UniElement | null,
innerBoxElement: null as UniElement | null,
}
},
onShow() {
const 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) {
this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
}
})
})
this.outBoxElement = uni.getElementById("outBox")
resizeObserver.observe(this.outBoxElement)
this.innerBoxElement = uni.getElementById("innerBox")
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)
},
outBoxClick() {
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) {
this.outBoxElement!.style.setProperty("width", "140px")
this.outBoxElement!.style.setProperty("height", "140px")
}
if(this.innerBoxElement != null) {
this.innerBoxElement!.style.setProperty("width", "80px")
this.innerBoxElement!.style.setProperty("height", "80px")
}
},
toggleDisplay() {
this.boxDisplay = !this.boxDisplay
},
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+"}"
}
}
}
</script>
<style>
.info-item {
flex-direction: row;
<template>
<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>
</view>
<button @click="revertBoxSize">还原修改前元素宽高</button>
<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
<view>
<text class="info-text">蓝色方块元素:</text>
<view class="info-item">
<text class="info-text">{{outBoxSizeInfo}}</text>
</view>
<text class="info-text" style="margin-top: 20px;">红色方块元素:</text>
<view class="info-item">
<text class="info-text">{{innerBoxSizeInfo}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
outBoxSizeInfo: "",
innerBoxSizeInfo: "",
offset: 2,
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() {
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) {
this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
}
})
})
this.outBoxElement = uni.getElementById("outBox")
if (this.outBoxElement != null) {
this.resizeObserver!.observe(this.outBoxElement)
}
this.innerBoxElement = uni.getElementById("innerBox")
if (this.innerBoxElement != null) {
this.resizeObserver!.observe(this.innerBoxElement)
}
}
},
methods: {
innerBoxClick() {
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() {
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) {
this.outBoxElement!.style.setProperty("width", "140px")
this.outBoxElement!.style.setProperty("height", "140px")
}
if (this.innerBoxElement != null) {
this.innerBoxElement!.style.setProperty("width", "80px")
this.innerBoxElement!.style.setProperty("height", "80px")
}
},
toggleDisplay() {
this.boxDisplay = !this.boxDisplay
},
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 + "}"
}
}
}
</script>
<style>
.info-item {
flex-direction: row;
}
.info-text {
font-size: 14px;
}
font-size: 14px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或