vue-08-事件处理-模态框案例-复习

接07知识点的小案例

<div id="box">

    <button @click="isShow= !isShow">模态框</button>

    <div id="overlay" v-show="isShow">
    //阻止冒泡事件 .stop就是阻止点击页面就切换到模态框页面了
      <div id="center" @click.stop>
        用户名：<input />
        <button @click="isShow=!isShow">登录</button>
      </div>

    </div>

  </div>

 <script>
    var obj = {
      data() {
        return {
          // 显示与否
          isShow: false
        }
      },
      methods: {

      },
    }
    var app = Vue.createApp(obj).mount("#box")
  </script>

运行结果：

其实还可以改一点，用self也不错

<!-- self只有绑定是自己的才会被触发   -->
    <div id="overlay" v-show="isShow" @click.self>

      <div id="center" @click.stop>
        用户名：<input />
        <button @click="isShow=!isShow">登录</button>
      </div>

    </div>

---

补一下样式

 <style>
    #overlay {
      background-color: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      margin: auto;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    #center {
      background-color: #fff;
      border-radius: 5px;
      position: fixed;
      width: 360px;
      height: 200px;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 15px 30px;

    }