vue3

15.vue3/vue-router1/src/Teleport/demo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Teleport to="body"> 
+     <div class="demo">
+        <h3>demo</h3>
+        <button @click="openWindows">开启弹框</button>
+        <button @click="closeWindows">关闭弹框</button>
+        <div class="dialog" v-if="isShow"></div>
+     </div>
+     </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let isShow = ref(false)
+function openWindows() {
+    isShow.value = true;
+}
+function closeWindows() {
+    isShow.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+    width: 400px;
+    height: 400px;
+    color: #fff;
+    background: #00f;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -200px;
+    margin-top: -200px;
+}
+.dialog {
+    width: 300px;
+    height: 300px;
+    background: #ff0;
+}
+</style>

15.vue3/vue-router1/src/Teleport/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="main">
+    <h1>Teleport</h1>
+    <Demo></Demo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import Demo from './demo.vue'
+</script>
+
+<style lang="scss" scoped>
+.main {
+    width: 800px;
+    height: 800px;
+    background: green;
+    filter: saturate(200%);
+}
+</style>

15.vue3/vue-router1/src/main.ts

@@ -1,6 +1,7 @@
-import './assets/main.css'
+// import './assets/main.css'
 import { createApp } from 'vue'
 import router from './router'
-import App from './App.vue'
+// import App from './App.vue'
+import App from './Teleport/index.vue'
 
 createApp(App).use(router).mount('#app')