文章目录
- 简介
- 例子
简介
Teleport用于将我们的模板移到某个dom之下的技术- 他有一个
to属性，这个to属性后跟一个选择器，用来表示被包裹的属性应该放到哪个dom标签下 官网
- 我们在嵌套的组件内写一个弹窗，但是这个弹窗会插入到
body下面
setup>
import { ref } from 'vue';
const isShow = ref(false)const openModal = isOpen =>isShow.value = https://www.it610.com/article/isOpen
Teleport
v-if="isShow" class="modal">
我是弹窗
scoped>
.modal{
background-color: rgba(0,0,0,.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}.inner{
width: 500px;
height: 300px;
background-color: #fff;
border-radius: 10px;
}.inner main {
font-size: 30px;
height: 80% ;
padding-top: 20px;
text-align: center;
}.inner footer{
margin-right: 10px;
float: right;
}
效果
【Vue基础知识|Vue3之Teleport】
文章图片
我们会发现我们的弹窗被放到了
body下面推荐阅读
- java|如果再写for循环，我就锤自己
- 现在大多数人们用的前端框架有哪些大盘点
- React|【React】3_使用react组件化编码流程及案例分享（附源码）
- web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用
- vue.js|el-cascader 自动展开第一项或者某一项的下一级
- typescript|获取年月日星期几
- Vue|Vue-cli 脚手架一
- react.js|react-vant 实现黑暗模式
- JavaScript|JavaScript---常用元素的属性操作(点击图片修改src属性)