具有 vue js 滚动问题的自定义模式答案

【问题标题】：custom modals with vue js scrolling issue具有 vue js 滚动问题的自定义模式
【发布时间】：2018-02-19 11:04:16
【问题描述】：

我正在使用 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 组件导入到我需要的任何页面中。

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

【问题讨论】：

Bootstrap modals 在 body 上也设置了一个类，它设置了一个 'overflow: hidden` 属性来防止在 modal 打开时 body 滚动。你试过做这样的事情吗？
我需要在哪里放置溢出：隐藏？
就像我说的：“在身体上”。您的 HTML 文档的主体元素。
哦，但我的主要问题不是阻止正文从打开的模态滚动，而是在模态太长时使用模态滚动

标签： twitter-bootstrap vue.js vuejs2 vue-component

【解决方案1】：

你可以有这样的东西（其中 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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：