JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
    <div id="app">
        <div class="outer" v-if="isShow" @click.self="isShow=!isShow">
            <div class="inner">
                這是裡面
            </div>
        </div>
        <button @click.self="isShow=!isShow">click me</button>
    </div>

CSS

* {
            margin: 0;
            padding: 0;
        }

        .outer {
            background-color: #ccc;
            height: 100vh;
            position: absolute;
            inset: 0;
            margin: auto;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: fixed;
            inset: 0;
            margin: auto;
        }

JavaScript

Vue.createApp({
  setup() {
    const isShow = Vue.ref(false);
    return { isShow };
  },
}).mount("#app");