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>
擴展：按鈕在父組件，彈框是一個子組件，會涉及到父子組件之間的傳值。
-------
轉載於:https://www.cnblogs.com/DZzzz/p/11204805.html