vue組件模態框實現方式

// 組件代碼

<template>
<div>
  <div class="dialog-modal"> <!-- 根元素，z-index 需要高於父容器其他元素 -->
    <div class="dialog-wrapper" @click="onClose" v-show="isShow"></div> <!-- 加載一個具有透明度的背景，使根元素透明，子元素會繼承該透明度 -->
    <transition name="drop">
        <div class="dialog-container" v-show="isShow">  <!-- 模態框容器，z-index 需要高於背景 -->
            <span class="close-btn" @click="onClose">x</span>
            <slot>
                <p>hello</p>
            </slot>
        </div>
    </transition>
  </div>
</div>
</template>
<script>
    export default {
        props: {
            isShow:{
                type: Boolean,
                default: false
            }
        },
        methods: {
            onClose(){
                this.$emit('on-close');
            }
        }
    }
</script>
<style>
.drop-enter-active {
  transition: all .5s;
}
.drop-leave-active {
  transition: all .3s;
}
.drop-enter {
  transform: translateY(-500px);
}
.drop-leave-active {
  transform: translateY(-500px);
}   
  
    .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: #eee;
        opacity: .9;
    }
    .dialog-container{
        position: fixed;
        z-index:80;
        top: 10%;
        left: 25%;
        width: 50%;
        /* margin: 0 auto; */
        background-color: #eee;
        border-radius: 3px;
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
    }
    span.close-btn{
        padding: 0 5px;
        float: right;
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
    }
</style>

 

// 組件使用

//導入模態對話框
import modal from './plugins/dialog'
// 在使用組件
<modal></modal>

<modal @on-close="closeThis('isShowLog')":is-show='isShowLog'><login></login></modal>