vue3快速入门-Teleport(瞬移组件)

查看本系列文章合集click me

下载本系列文章源码click me

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。
使用 Teleport 就可以方便的解决组件间 css 层级问题

我们将模态内容包装在 teleport 组件中，还需要指定一个 to 属性，为该属性分配一个查询选择器，以标识目标元素。

父组件

<template><div id="d1"><h3>第一个div</h3></div><div id="d2"><h3>第二个div</h3></div><ModalButton></ModalButton>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ModalButton from "../components/ModalButton.vue";export default defineComponent({components: {ModalButton,},setup() {return {};},
});
</script>

子组件-teleport

<template><div><button @click="modalOpen = true">弹出一个模态框</button><teleport to="body"><div v-if="modalOpen" class="modal"><div>这是一个弹框，挂载在 body 元素上。<button @click="modalOpen = false">关闭</button></div></div></teleport></div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";export default defineComponent({setup() {const modalOpen = ref(false);return { modalOpen };},
});
</script>

<style scoped>
.modal {position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.modal div {display: flex;flex-direction: column;align-items: center;justify-content: space-around;background-color: white;width: 350px;height: 300px;padding: 5px;
}
</style>

to属性为body

to属性为#d1

:::

vue3快速入门-Teleport(瞬移组件)相关推荐

JavaWebDay11_BootStrap概述,快速入门,常用样式组件插件
JavaWebDay11 课程大纲 1.BootStrap的概述和快速入门 2.BootStrap的常用样式组件插件 3.综合案例黑马旅游网第一章 BootStrap概述和快速入门 1.BootSt ...
Vue3快速入门教程
学某个新技能时,大多数人倾向于:一开始就从头到尾完整学一遍:甚至有人翻来覆去重复学很多遍也达不到熟记于心, 我个人认为,这不是最好的办法~ 我的建议的是: 面向需求 or 面向问题来学习. 最开始你可 ...
Vue3快速入门-reactive
查看本系列文章合集click me 下载本系列文章源码click me 作用: 接收一个普通对象然后返回该普通对象的响应式代理对象语法: const xxx = reactive({}); 响应式的 ...
Android快速入门四大应用组件之一Activity（打电话和发短信）功能练习
3)在回调方法当中实现逻辑 */ public class MainActivity extends Activity implements OnClickListener { private Edi ...
VIVE开发基础（A、快速入门篇）（Yanlz+HTC+VIVE+VR+AR+MR+XR+SteamVR+CameraRig+LightHouse+HeadSet+Teleport+立钻哥哥+）
<HTC_VIVE开发基础> 版本作者参与者完成日期备注 HTC_VIVE_V01_1.0 严立钻 2018.08.23 <HTC_VIVE开发基础>发布说明: +++ ...
Vue3.0快速入门
一.安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm ins ...
Transform组件C#游戏开发快速入门
orm组件C#游戏开发快速入门大学霸 Transform组件C#游戏开发快速入门组件(Component)可以看作是一类属性的总称.而属性是指游戏对象上一切可设置.调节的选项,如图2-8所示.本文选 ...
micro-app-vue2 vue3 超详细快速入门指南学习记录
micro-app-vue 快速入门指南简介 micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它 ...
【组件-工具】小程序ui组件Color UI快速入门
小程序ui组件Color UI快速入门什么是ColorUI ColorUI是UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需 ...

vue3快速入门-Teleport(瞬移组件)

查看本系列文章合集click me

下载本系列文章源码click me

父组件

子组件-teleport

vue3快速入门-Teleport(瞬移组件)相关推荐

最新文章

热门文章