feat: 新增 teleprot 页面及示例

pages.json

@@ -622,6 +622,14 @@
       {
         "navigationBarTitleText" : "依赖注入"
       }
+    },
+    {
+    	"path" : "pages/built-in-component/teleport/teleport",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "teleport",
+    		"enablePullDownRefresh" : false
+    	}
     }
   ],
   "tabBar": {

pages/built-in-component/teleport/sub-container.uvue

+<template>
+	<view id="teleport" class="sub-container">
+		<view>
+			<text class="text">红色区域为子组件</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+.sub-container {
+	background-color:red;
+	height:200px;
+	padding:10px;
+}
+.text {
+	color:#fff;
+}
+</style>
\ No newline at end of file

pages/built-in-component/teleport/teleport.test.js

+const PAGE_PATH = '/pages/built-in-component/teleport/teleport'
+
+describe('teleport', () => {
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  
+  it('teleport', async () => {
+  	await page.waitFor(500)
+  	const image = await program.screenshot({
+  		fullPage: true
+  	});
+  	expect(image).toMatchImageSnapshot();
+  })
+})

pages/built-in-component/teleport/teleport.uvue

+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
+		<view id="container" class="container">
+			<text class="text">.container 区域</text>
+			<!-- <subContainer></subContainer> -->
+			<view id="content1" class="content content-1">
+				<text class="text">content1 区域</text>
+			</view>
+			<view id="content2" class="content content-2">
+				<text class="text">content2 区域</text>
+			</view>
+			<!-- <button class="btn" @click="changePosition">点击穿梭</button> -->
+			<teleport v-if="show" to="#content1" :disabled="disabled">
+				<view class="send-content">
+					<text class="send-content-text">内容在.container中，使用teleport在#content1元素中展示</text>
+				</view>
+			</teleport>
+		</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	// import subContainer from './sub-container.uvue'
+	export default {
+		// components: { subContainer },
+		data() {
+			return {
+				to: 'content1',
+				disabled: false,
+				showingString: '穿梭内容在 body 中',
+				show: false
+			}
+		},
+		onReady() {
+			// 需要等内容挂载后，teleport才生效
+			this.show = true
+		},
+		methods: {
+			changePosition() {
+				this.to = '#content1'
+			}
+		}
+	}
+</script>
+
+<style>
+	.container {
+		background-color: #f5f5f5;
+		border: 1px #ccc solid;
+		margin: 5px;
+		padding: 10px;
+	}
+	.text {
+		margin: 5px 0;
+	}
+
+	.content {
+		height: 120px;
+		border: 1px #ccc solid;
+		margin: 5px;
+		padding: 10px;
+	}
+
+	.send-content {
+		padding: 5px;
+		background-color: #ff5a5f;
+		height: 50px;
+
+	}
+
+	.send-content-text {
+		color: #fff;
+		font-size: 12px;
+	}
+</style>
\ No newline at end of file

pages/tab-bar/options-api.uvue

@@ -68,6 +68,10 @@
                 name: 'keepAlive',
                 url: 'keep-alive',
                 enable: true,
+              },{
+                name: 'teleport',
+                url: 'teleport',
+                enable: true,
               },
             ] as PageItem[],
           },