// teleport 传送门 如:将在js中可以控制的body中显示的内容
// 如:一个小矩形点击按钮覆盖一个全屏的遮罩
css样式:
<style>.area {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;background: green;}.mask {position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: #000;opacity: 0.5;}</style>
js
<script>// teleport 传送门 如:将在js中可以控制的body中显示的内容
// 如:一个小矩形点击按钮覆盖一个全屏的遮罩// 创建 vue实例const app = Vue.createApp({data() {return{show:false}},methods: {handleClick() {this.show = !this.show;}},template: `<div class="area"><button @click="handleClick">按钮</button><teleport to="body"><div class="mask" v-show="show"></div></teleport></div>`});const vm = app.mount('#root');</script>