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

refactor: 兼容 web 端

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