vue2实现模态框

<template>
<div>
<div class="">
<button type="button" name="button" @click="offClose">模态框</button>
</div>

<div class="dialog-modal">

<div class="dialog-wrapper" @click="onClose" v-show="isShow"></div>

<transition name="drop">
  <div class="dialog-container" v-show="isShow">
 
    <div class="" style="width:100%;height:40px;border-radius:5px 5px 0px 0px;background:#fff">
      <span class="close-btn" @click="onClose">关闭</span>
    </div>
    <slot>
      <div class="" style="height:100%;width:100%;text-align:center">
        ![](./img/userimg/1.jpg)//换成你自已的图片地址
      </div>
    </slot>
  </div>
</transition>

</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
}
},
methods: {
offClose() {
this.isShow = !this.isShow;
},
onClose() {
this.isShow = false;
}
}

}
</script>
<style>
.dialog-modal {
position: absolute;
z-index: 5;
}

.dialog-wrapper {
position: fixed;
height: 100%;
width: 100%;
z-index: 5;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.dialog-wrapper {
background-color: #000;
opacity: .8;
}
.dialog-container {
position: fixed;
z-index: 80;
top: 20px;
left: 5%;
width: 90%;
height: 96%;
background-color: #eee;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
span.close-btn {
padding: 5px 10px;
float: right;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
</style>

12121.png