vue中超簡單的方法實現點擊一個按鈕出現彈框，點擊彈框外關閉彈框

效果圖展示：

 

View層

<template>
  <div>
    <div class="mask" v-if="showModal" @click="showModal=false"></div>
    <div class="pop" v-if="showModal">
        <button @click="showModal=false" class="btn">點擊出現彈框</button>
    </div>
    <button @click="showModal=true" class="btn">點擊出現彈框</button>
  </div>
</template>

 

數據層：

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

 

樣式層：

<style scoped>
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;
 
  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px);
  z-index: 2
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>

 

關鍵點：

1.mask層的層級（z-index）要比彈出的pop的層級低。

2.wow,寫完啦，就是這么簡單....

完整代碼：

<template>
  <div>
    <div class="mask" v-if="showModal" @click="showModal=false"></div>
    <div class="pop" v-if="showModal">
        <button @click="showModal=false" class="btn">點擊出現彈框</button>
    </div>
    <button @click="showModal=true" class="btn">點擊出現彈框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style scoped>
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;
 
  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px);
  z-index: 2
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>

 應用場景：

比方說有一個主頁面，然后主頁面里面有許多附帶的小彈框，並且主頁面的 功能十分的復雜，將所有的小彈框的內容也寫在主頁面，這樣子代碼就會非常的冗余了。

然后這個時候就可以運用父子組件通信啦。

 

擴展：按鈕在父組件，彈框是一個子組件，會涉及到父子組件之間的傳值。

至此，功能完成