Teleport
Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部,以构建一个组成应用程序 UI 的树。
然而,有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置
模态弹框
to属性:放到指定位置
<template> <div class="reson"> <button @click="showModel">点击弹出模态框</button> <teleport to="body"> <div class="mask" v-show="isShow"> <div class="box"> <h1>我是模态框</h1> <button @click="closeModel">点击关闭模态框</button> </div> </div> </teleport> </div> </template> <script> import { ref } from "vue" export default { name: 'Reson', setup() { let isShow = ref(false) //显示 let showModel = function () { isShow.value = true } //隐藏 let closeModel = function () { isShow.value = false } return { isShow, showModel, closeModel } } }; </script> <style lang="scss" scoped> .reson { background-color: pink; } .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } .box { width: 300px; height: 300px; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
标签:模态,Teleport,color,50%,isShow,UI,Vue3 From: https://www.cnblogs.com/LIXI-/p/16712910.html