vue3

20.vue3/project3/src/Teleport/Demo.vue

@@ -0,0 +1,44 @@
+<template>
+  <Teleport to="body">
+    <div class="box">
+      <div class="text-3cl">Demo</div>
+      <button
+        class="w-30 h-10 m-10 hover:bg-blue-600 hover:text-white border-2 text-sm"
+        @click="openDialog"
+      >
+        开启弹框
+      </button>
+      <button
+        @click="closeDialog"
+        class="w-30 h-10 m-10 hover:bg-blue-600 hover:text-white border-2 text-sm"
+      >
+        关闭弹框
+      </button>
+      <div class="w-80 h-80 bg-yellow-300" v-if="isShow"></div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+let isShow = ref(true);
+function openDialog() {
+  isShow.value = true;
+}
+function closeDialog() {
+  isShow.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -260px;
+  margin-left: -280px;
+  width: 560px;
+  height: 520px;
+  background: green;
+}
+</style>

20.vue3/project3/src/Teleport/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <!-- filter saturate-50 -->
+  <div class="content">
+    <h1 class="h-26 text-6xl">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>
+.content {
+  width: 800px;
+  height: 800px;
+  background: red;
+  filter: saturate(50%);
+}
+</style>

20.vue3/project3/src/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './Demo1.vue'
+import App from './Teleport/index.vue'
 import router from './router'
 const app = createApp(App)