网站开发报价表,德州做网站的公司有哪些,phpwind和wordpress,设计者人才网官网teleport 标签#xff1a;用于将组件中的 HTML 元素移动到任意的位置。 使用 teleport 标签移动 HTML 元素#xff1a;
!-- 将 teleport 中的内容移动到 body 标签中 --
teleport tobodydivh3我是第三层组件的标题/h3…teleport 标签用于将组件中的 HTML 元素移动到任意的位置。 使用 teleport 标签移动 HTML 元素
!-- 将 teleport 中的内容移动到 body 标签中 --
teleport tobodydivh3我是第三层组件的标题/h3p我是第三层组件的内容/pp我是第三层组件的内容/pp我是第三层组件的内容/p/div
/teleport 注teleport 标签也可以通过 id 名移动例如teleport to#box 使用 teleport 标签制作全局弹窗
第一层组件
templatediv classoneh3我是One组件第一层/h3hr /Two/Two/div
/templatescript
import Two from ../components/Two;
export default {name: One,components: { Two }
}
/script
第二层组件
templatediv classtwoh3我是Two组件第二层/h3hr /Three/Three/div
/templatescript
import Three from ../components/Three.vue
export default {name: Two,components: { Three }
}
/script
第三层组件弹窗组件使用 teleport 标签将弹窗内容移动到 body 标签中。
templatebutton clickisShow true显示弹窗/buttonteleport tobodydiv classmask v-ifisShowdiv classdialogh3我是弹窗的标题/h3p我是弹窗的内容/pp我是弹窗的内容/pp我是弹窗的内容/pbutton clickisShow false关闭弹窗/button/div/div/teleport
/templatescript
import { ref } from vue
export default {name: Three,setup() {let isShow ref(false);return { isShow }}
}
/scriptstyle scoped
.mask {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 999;display: flex;justify-content: center;align-items: center;
}.dialog {width: 300px;padding: 20px;background-color: aqua;text-align: center;
}
/style 最终效果 原创作者吴小糖
创作时间2023.11.21
