Vue 传送门

// 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>