通过teleport把模板内容移动到当前组件之外的DOM!
模态框(子组件),里面的模态宽度、标题、X按钮显示等都可以通过属性接受定制
<template>
<teleport to="body">
<!-- <teleport to="#app">也可以指定到id选择器上 -->
<div class="modal-bg" v-show="visible">
<div class="modal-content">
<button class="close" @click="$emit('close-modal')">X</button>
<!-- close-modal为父组件传递方法,关闭弹窗,isVisible=false即可 -->
<div class="model-title">{{title}}</div>
<div class="modal-body">
<slot>第一个对话框</slot>
</div>
</div>
</div>
</teleport>
</template>
<script>
export default {
props:['title','visible']
}
</script>
<style lang="less">
.modal-bg{
background: #000;
opacity: 0.7;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.modal-content{
width: 600px;
min-height:300px;
border: 1px solid #eee;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
.close{
position: absolute;
right: 10px;
top: 5px;
width: 40px;
border: none;
display: inline-block;
cursor: pointer;
}
.model-title{
background: #eee;
color: #000;
height: 32px;
line-height: 32px;
text-align: center;
}
.modal-body{
padding: 40px;
}
}
</style>
父容器(简单写的,自己定制)
template>
<div class="home">
<button @click="isVisible=true">弹出一个模态框</button>
<Modal
:visible="isVisible"
:title="title"
@close-modal="isVisible=false"
></Modal>
</div>
</template>
<script>
import Modal from '@/components/Modal'
export default {
data(){
return{
title:"用户登录",
isVisible:false
}
},
components:{Modal}
}
</script>
(ps:以后再有傻逼面试题让你写模态框,这个可以解决了!不过还是不要出卖自己的劳动力吧!)