Teleport
teleport将dom元素渲染到指定的标签中
<template> <h1>传送门</h1> <div class="area"> <button @click="toggle">按钮</button> <teleport to="body"> <div class="mask" v-if="show"></div> </teleport> </div> </template> <script setup> import { ref } from 'vue' const show = ref(false); const toggle = () => { show.value = !show.value; } </script> <style> .area { position: absolute; left: 50%; top: 50%; width: 200px; height: 300px; background-color: green; transform: translate(-50%, -50%); z-index: 10; } .mask { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: #000; opacity: 0.5; z-index: 100; } </style>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接