提交 78eb86a2 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

refactor: 兼容 web 端

上级 9ac47ff1
<template>
<view class="uni-padding-wrap">
<page-head
id="page-head"
title="getElementById-multiple-root-node"
></page-head>
<text id="text">this is text</text>
<view id="view" class="uni-common-mt" style="border: 1px solid red"
>this is view</view
>
<button class="uni-btn" @click="changePageHeadBackgroundColor">
修改 page-head 背景色
</button>
<button class="uni-btn" @click="changeTextColor">修改 text 字体颜色</button>
<button class="uni-btn" @click="changeViewStyle">
修改 view 宽高及背景色
</button>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
checked: false,
homePagePath: '/pages/tabBar/component',
launchOptionsPath: '',
}
},
methods: {
getElementByNotExistId(): Element | null {
return uni.getElementById('not-exist-id')
},
changePageHeadBackgroundColor(){
const pageHead = uni.getElementById('page-head')!
pageHead.style.setProperty('backgroundColor', 'red')
},
changeTextColor(){
const text = uni.getElementById('text')!
text.style.setProperty('color', 'red')
},
changeViewStyle(){
const view = uni.getElementById<UniViewElement>('view')
if(view !== null){
view.style.setProperty('width', '90%')
view.style.setProperty('height', '50px')
view.style.setProperty('backgroundColor', '#007AFF')
}
}
}
}
<template>
<view class="uni-padding-wrap">
<page-head id="page-head" title="getElementById-multiple-root-node"></page-head>
<text id="text">this is text</text>
<view id="view" class="uni-common-mt" style="border: 1px solid red">this is view</view>
<button class="uni-btn" @click="changePageHeadBackgroundColor">
修改 page-head 背景色
</button>
<button class="uni-btn" @click="changeTextColor">修改 text 字体颜色</button>
<button class="uni-btn" @click="changeViewStyle">
修改 view 宽高及背景色
</button>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
checked: false,
homePagePath: '/pages/tabBar/component',
launchOptionsPath: '',
}
},
methods: {
getElementByNotExistId() : Element | null {
return uni.getElementById('not-exist-id')
},
changePageHeadBackgroundColor() {
const pageHead = uni.getElementById('page-head')!
pageHead.style['backgroundColor'] = 'red'
},
changeTextColor() {
const text = uni.getElementById('text')!
text.style['color'] = 'red'
},
changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view')
if (view !== null) {
view.style['width'] = '90%'
view.style['height'] = '50px'
view.style['backgroundColor'] = '#007AFF'
}
}
}
}
</script>
......@@ -3,9 +3,7 @@
<page-head id="page-head" title="getElementById"></page-head>
<view class="uni-padding-wrap">
<text id="text">this is text</text>
<view id="view" class="uni-common-mt" style="border: 1px solid red"
>this is view</view
>
<view id="view" class="uni-common-mt" style="border: 1px solid red">this is view</view>
<button class="uni-btn" @click="changePageHeadBackgroundColor">
修改 page-head 背景色
</button>
......@@ -23,37 +21,37 @@
</template>
<script lang="uts">
export default {
data() {
return {
checked: false,
homePagePath: '/pages/tabBar/component',
launchOptionsPath: '',
}
},
methods: {
getElementByNotExistId() : Element | null {
return uni.getElementById('not-exist-id')
},
changePageHeadBackgroundColor() {
const pageHead = uni.getElementById('page-head')!
pageHead.style.setProperty('backgroundColor', 'red')
},
changeTextColor() {
const text = uni.getElementById('text')!
text.style.setProperty('color', 'red')
},
changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view')
if (view !== null) {
view.style.setProperty('width', '90%')
view.style.setProperty('height', '50px')
view.style.setProperty('backgroundColor', '#007AFF')
export default {
data() {
return {
checked: false,
homePagePath: '/pages/tabBar/component',
launchOptionsPath: '',
}
},
goMultipleRootNode() {
uni.navigateTo({ url: '/pages/API/get-element-by-id/get-element-by-id-multiple-root-node' })
methods: {
getElementByNotExistId() : Element | null {
return uni.getElementById('not-exist-id')
},
changePageHeadBackgroundColor() {
const pageHead = uni.getElementById('page-head')!
pageHead.style['backgroundColor'] = 'red'
},
changeTextColor() {
const text = uni.getElementById('text')!
text.style['color'] = 'red'
},
changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view')
if (view !== null) {
view.style['width'] = '90%'
view.style['height'] = '50px'
view.style['backgroundColor'] = '#007AFF'
}
},
goMultipleRootNode() {
uni.navigateTo({ url: '/pages/API/get-element-by-id/get-element-by-id-multiple-root-node' })
}
}
}
}
</script>
</script>
......@@ -72,7 +72,7 @@ describe("onLoad", () => {
failureThreshold: 0.05,
failureThresholdType: "percent",
});
await page.waitFor("view");
await program.callUniMethod('hideToast')
});
it("showLoading", async () => {
page = await program.reLaunch(INTERMEDIATE_PAGE_PATH);
......@@ -90,7 +90,8 @@ describe("onLoad", () => {
expect(image).toMatchImageSnapshot({
failureThreshold: 0.05,
failureThresholdType: "percent",
});
});
await program.callUniMethod('hideLoading')
});
it("showModal", async () => {
page = await program.reLaunch(INTERMEDIATE_PAGE_PATH);
......
......@@ -154,12 +154,6 @@
name: 'element元素',
url: 'get-element-by-id',
api: ["getElementById"],
// #ifdef APP-ANDROID
enable: true,
// #endif
// #ifndef APP-ANDROID
enable: false,
// #endif
},
{
name: 'element draw',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册