Question

我正在使用vue js创建自举模式，我跟随tutorial但是经过了一些调整，它运行得很好但是现在当我有很长的模态我有一些关于滚动页面的问题，因为它只是在模态后面滚动页面而不是模态

这是我的modal.vue组件

<template>
    <div class="modal-mask" @click="close" v-show="created">
    <transition name="modal"
        enter-active-class="animated bounceInUp"
        leave-active-class="animated bounceOutDown"
        mode="out-in"
        v-on:enter="beforeEnter"
        v-on:after-leave="afterLeave"
    >
        <div class="modal-dialog" :class="size" v-if="show" @click.stop>
            <div class="modal-content">
                <div class="modal-header" :class="color">
                    <button type="button" class="close" @click="close">&times;</button>
                    <h6 class="modal-title">
                        <slot name="title"></slot>
                    </h6>
                </div>

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

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

<script>
export default{
    props: ['show','color','size'],
    data(){
        return{
            created: false,
        }
    },
    mounted(){
      document.addEventListener("keydown", (e) => {
          if (this.show && e.keyCode == 27) {
            this.close();
          }
      });    
    },
    methods: {
        close(){
            this.$emit('close');
        },
        beforeEnter(){
            this.created = true
        },
        afterLeave(){
            this.created = false
        }
    }
}
</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>

我只需要将这个modal.vue组件导入到我需要的任何页面中。

那么如何解决这个滚动问题？

Answer 1

将css prop overflow-y: auto设置为你的模态体类

.modal-body {
    overflow-y: auto;
}

Answer 2

您可以拥有类似的东西（其中modal-wrapper是将modal-mask内的元素包装起来的div）

.modal-mask {
    z-index: 11010;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    background-color: rgba(44, 46, 47, 0.9);
}

.modal-wrapper {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
    margin-top: 50px;
    border-radius: 3px;
}

使用vue js滚动问题的自定义模态

2 个答案: