西安网站制作公司排,快速seo排名优化,广州有专做网站,上海专业做网站的公司有哪些Teleport/Teleport 作用目的#xff1a;
用于将指定的组件或者元素传送到指定的位置#xff1b; 通常是自定义的全局通用弹窗#xff0c;绑定到 body 上#xff0c;而不是在当前元素上面#xff1b;
使用方法#xff1a;
接收两个参数 to: 要将目标传…Teleport/Teleport 作用目的
用于将指定的组件或者元素传送到指定的位置 通常是自定义的全局通用弹窗绑定到 body 上而不是在当前元素上面
使用方法
接收两个参数 to: 要将目标传到的位置 可以是指定的元素、class、id disabled: 是否禁止将目标传送到指定位置Boolean
比如
Teleport
tobody
disabledtrue
/Teleport而为什么要使用teleport 内置组件呢
比如有这样一个需求我们需要一个盒子顺时针旋转 45度而这个盒子同时是一个弹窗的父级组件并且这个盒子可以打开改弹窗
父组件
template
div classmy-built-in!-- 内置组件 --div classother-place clickhandleOpen其他dom位置TelDialog :isShowTelisShowTel:telContelCon onCloseDialoghandleClose/TelDialog/div
/div
/template
script setup
import { ref, reactive } from vue
import TelDialog from ./components/telDialog.vue
const isShowTel ref(false)
const telCon ref(This is a Teleport component.)
const handleClose () {isShowTel.value false
}
const handleOpen () {isShowTel.value true
}
/script
style langscss scoped
.my-built-in{position: relative;width: 100px;height: 100px;background-color: #00ff00;left: 200px;transform: rotate(45deg);
}/style弹窗组件
templatediv classmy-tel-container v-ifprops.isShowTeldiv classmy-tel-titleTeleport 弹窗/divdiv classmy-tel-content{{ props.telCon }}/divdiv classmy-tel-footel-button typeprimary classclose-btn clickhandleClose关闭teleport 弹窗/el-button/div/div
/template
script setup
import { ref } from vue
const props defineProps({isShowTel:{type: Boolean,default: false,},telCon: {type: String,default: }
})
const emits defineEmits([onCloseDialog])
const handleClose () {emits(onCloseDialog)
}
/script
style langscss scoped
.my-tel-container{position: fixed;top:50%;left: 50%;width: 440px;height: auto;background-color: aqua;box-shadow: 0 2px 4px 0 rgba(0,0,0, .3);box-sizing: border-box;padding: 0 16px 16px;.my-tel-title{width: 100%;height: 46px;text-align: center;line-height: 46px;font-size: 16px;color: #333;}.my-tel-content{width: 100%;height: 200px;}.my-tel-foot{width: 100%;height: 46px;display: flex;justify-content: right;align-content: center;}
}
/style我们会发现写好之后在没有使用teleport 组件的情况下 弹窗也跟着旋转了45度这并不是我们想要的为什么会出现这种情况呢 如图
我们需要的是即使父组件发上了旋转 位移等弹窗依然是位于浏览器的正中央 此时我们就可以通过 Teleport/Teleport 组件来将弹窗组件实际渲染的位置更改到 body 上但是这样并不影响 组件直接的通讯
更改父组件为
template
div classmy-built-in!-- 内置组件 --div classother-place clickhandleOpen其他dom位置!-- **只需要添加 Teleport 组件即可disabled 接收一个布尔值默认是falsetrue代表不传送到指定位置 body上** --Teleport tobody :disabledfalseTelDialog :isShowTelisShowTel:telContelCon onCloseDialoghandleClose/TelDialog/Teleport/div
/div
/template注意事项
a、在使用teleport 组件时需要确保传送的位置dom已经渲染完成即to的位置dom已完成渲染否则将无法实现传送 b、同时可以通过给disabled 动态传入一个Boolean 值来控制是否要将元素或dom传送到指定的位置
