Question

我正在使用vuejs创建模态并跟随this example但是我为模态创建了一个单独的文件，所以我可以简单地在我需要的地方调用我的模态组件

这是我的 modal.vue

<template>
    <div class="modal-mask" @click="close">
        <div class="modal-dialog" :class="size">
            <div class="modal-content">
                <div class="modal-header" :class="color">
                    <button type="button" class="close" @click="close">&times;</button>
                    <h6 class="modal-title">{{ title }}</h6>
                </div>

                <div class="modal-body">
                    <slot></slot>
                </div>

                <div class="modal-footer">
                    <slot name="button"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    props: ['title','color','size'],
    methods: {
        close(){
            this.$emit('close');
        }
    }
}
</script>

<style>
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s ease;
}
</style>

并在 index.vue 中，我只想简单地将其称为

<app-modal
        :title="modalTitle"
        :size="modalSize"
        :color="modalColor"
        v-if="modalShow"
        @close="modalShow = false"
    >
    </app-modal>

现在我的问题是我想要使用2种转换，首先是在我的 index.vue 页面

<transition name="modal">
    <app-modal
        :title="modalTitle"
        :size="modalSize"
        :color="modalColor"
        v-if="modalShow"
        @close="modalShow = false"
    >
    </app-modal>
</transition>

，第二个是我的 modal.vue ，就像这个

<template>
    <div class="modal-mask" @click="close">
        <transition name="modal-inside">
        <div class="modal-dialog" :class="size">
            <div class="modal-content">
                <div class="modal-header" :class="color">
                    <button type="button" class="close" @click="close">&times;</button>
                    <h6 class="modal-title">{{ title }}</h6>
                </div>

                <div class="modal-body">
                    <slot></slot>
                </div>

                <div class="modal-footer">
                    <slot name="button"></slot>
                </div>
            </div>
        </div>
        </transition>
    </div>
</template>

为什么我想这样就好了，因为在modal-mask类中扭曲整个模态并且css类添加了一些深色/阴影背景，因此用户可以专注于模态....完全像bootstrap模态淡入淡出效果，之后我希望div modal-dialog内的所有内容在modal-mask已完成过渡后显示/过渡

因此它会先使背景变暗然后显示模态...它们会一个接一个地移动..不是同时

或者更容易想象我想生成与bootstrap modal

完全相同的内容

嵌套过渡模态

0 个答案: