From 2c6afff2e9044cf283f3c5e9fab2b089626ed137 Mon Sep 17 00:00:00 2001
From: mehaotian <490272692@qq.com>
Date: Thu, 25 Jan 2024 20:23:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20teleprot=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8F=8A=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  8 ++
 .../teleport/sub-container.uvue               | 31 ++++++++
 .../teleport/teleport.test.js                 | 17 ++++
 .../built-in-component/teleport/teleport.uvue | 79 +++++++++++++++++++
 pages/tab-bar/options-api.uvue                | 10 ++-
 5 files changed, 142 insertions(+), 3 deletions(-)
 create mode 100644 pages/built-in-component/teleport/sub-container.uvue
 create mode 100644 pages/built-in-component/teleport/teleport.test.js
 create mode 100644 pages/built-in-component/teleport/teleport.uvue

diff --git a/pages.json b/pages.json
index 1ee6a3b..f64652f 100644
--- a/pages.json
+++ b/pages.json
@@ -622,6 +622,14 @@
       {
         "navigationBarTitleText" : "依赖注入"
       }
+    },
+    {
+    	"path" : "pages/built-in-component/teleport/teleport",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "teleport",
+    		"enablePullDownRefresh" : false
+    	}
     }
   ],
   "tabBar": {
diff --git a/pages/built-in-component/teleport/sub-container.uvue b/pages/built-in-component/teleport/sub-container.uvue
new file mode 100644
index 0000000..5d014c4
--- /dev/null
+++ b/pages/built-in-component/teleport/sub-container.uvue
@@ -0,0 +1,31 @@
+<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
diff --git a/pages/built-in-component/teleport/teleport.test.js b/pages/built-in-component/teleport/teleport.test.js
new file mode 100644
index 0000000..8af3070
--- /dev/null
+++ b/pages/built-in-component/teleport/teleport.test.js
@@ -0,0 +1,17 @@
+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();
+  })
+})
diff --git a/pages/built-in-component/teleport/teleport.uvue b/pages/built-in-component/teleport/teleport.uvue
new file mode 100644
index 0000000..3f40c2d
--- /dev/null
+++ b/pages/built-in-component/teleport/teleport.uvue
@@ -0,0 +1,79 @@
+<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
diff --git a/pages/tab-bar/options-api.uvue b/pages/tab-bar/options-api.uvue
index f12e22c..67b4db5 100644
--- a/pages/tab-bar/options-api.uvue
+++ b/pages/tab-bar/options-api.uvue
@@ -64,9 +64,13 @@
             name: '内置组件',
             open: false,
             pages: [
-              {
-                name: 'keepAlive',
-                url: 'keep-alive',
+              {
+                name: 'keepAlive',
+                url: 'keep-alive',
+                enable: true,
+              },{
+                name: 'teleport',
+                url: 'teleport',
                 enable: true,
               },
             ] as PageItem[],
-- 
GitLab