子页面（pop.vue）
html：部分
<template>
<div class="card-modal-view" v-if="visible" @click="funClose($event)">
<div class="card-notice" ref="msk">
<div class="card-content">
<div class="content-title">弹窗标题</div>
</div>
</div>
</div>
</template>
js：部分
<script>
export default {
name: "pop",
props: {
visible: {
type: Boolean,
default: false, }, },
methods: {
funClose(ev) {
if (!this.$refs.msk.contains(ev.target)) {
this.$emit("close", false);
} }, },};
</script>
css：部分
<style lang="scss" scoped>
.card-modal-view {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
width: 100vw;
height: 100vh;
z-index: 2;
.card-notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
text-align: left;
width: 85%;
border-radius: 6px;
overflow: hidden;
}
.card-content {
min-height: 215px;
max-height: 420px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background: #fff;
overflow-y: scroll;
.content-title {
margin: 17px auto;
text-align: center;
}
}
}
</style>
父页面（father.vue）：
（1）visible：父页面传过来控制弹窗是否展示变量
（2） @close="close":需要在父组件加close方法
父页面 代码如下：
<template>
<div>
<div @click="click">点击跳出弹框</div>
<Pop :visible="visible" @close="close"></Pop>
</div>
</template>
<script>
import Pop from './pop.vue'
export default {
data() {
return {
visible: false,
};
},
components: {
Pop,
},
methods: {
// 弹窗打开
click() {
this.visible = true;
},
// 弹窗关闭
close() {
this.visible = false;
},
},
};
</script>
