1.使用监听方法。点击元素不是弹出框则隐藏
<template>
<div v-if="showAlert" class="alert"
style="position: fixed;top: 100px;width: 200px;height: 200px;background: #ccc;">测试弹框
</div>
</template>
<script>
export default{
name: 'index',
data(){
return{
showAlert: true,
}
},
mounted () {
document.addEventListener('click', (e)=> {
if (e.target.className != 'alert') {
this.showAlert = false;
}
})
}
}
</script>
2.使用遮罩层.。点击遮罩层隐藏弹框
<template>
<div class="out-box" v-show="showAlert" @click.self="showAlert=false">
<div class="alert"
style="position: fixed;top: 100px;width: 200px;height: 200px;background: #ccc;">测试弹框
</div>
</div>
</template>
<script>
export default{
name: 'index',
data(){
return{
showAlert: true,
}
},
mounted () {
}
}
</script>
<style>
.out-box{
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
background: rgba(0, 0, 0, .5);
&::-webkit-scrollbar{
display: none;
}
}
</style>