网站 分辨率,爱企业查询公司,潍坊专业输送带产品介绍,运营公众号还是做网站Teleport 是一个内置组件#xff0c;它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层
的位置去。
templateel-button clickdialogVisible true打开弹窗/el-buttonel-dialogv-modeldialogVisibleTeleport 是一个内置组件它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层
的位置去。
templateel-button clickdialogVisible true打开弹窗/el-buttonel-dialogv-modeldialogVisibleappend-to-bodytitle我是弹窗width30%/el-dialog/templatescriptimport { ref } from vue;export default {setup(){const dialogVisible ref(false);return {dialogVisible}} }/script templateel-button clickdialogVisible true打开弹窗/el-buttonel-dialogv-modeldialogVisibletitle我是弹窗width30%/el-dialog/templatescriptimport { ref } from vue;export default {setup(){const dialogVisible ref(false);return {dialogVisible}} }/script template
div classappApp组件Teleport tobodydiv我是被 teleport 包裹的元素/div/Teleport/div
/templatescript setup langts/scriptstyle scoped/style template
div classappApp组件Teleport tobodydiv我是被 teleport 包裹的元素/div/Teleport/divTeleport to#customDomp我是被 teleport 包裹的一号元素/p/TeleportTeleport to#customDomp我是被 teleport 包裹的二号元素/p/Teleport
/template 禁用传送功能
在某些场景下可能需要视情况禁用 Teleport 我们可以通过对 Teleport 动态地传入一个 disabled prop 来处理这两种不同情况 disabled 属性接收一个 Boolean 值true 代表不允许传送false 代表传送。
Teleport tobody:disabledtruep我是被 teleport 包裹的元素/p/Teleport
to 允许接收值
期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。
提示
Teleport 挂载时传送的 to 目标必须已经存在于 DOM 中。理想情况下这应该是整个 Vue 应用 DOM 树外部的一个元素。
如果目标元素也是由 Vue 渲染的你需要确保在挂载 Teleport 之前先挂载该元素。 Teleport 只改变了渲染的 DOM 结构它不会影响组件间的逻辑关系。
多个 Teleport 组件可以将其内容挂载在同一个目标元素上而顺序就是简单的顺次追加后挂载的将排在目标元素下更后面的位置上。
