Question

我有一个vue应用，其中包含Bootstrap modal个。该网站还具有一个“不活动”模式，该模式在X分钟后显示（为了进行测试，无论如何它都设置为5秒），在以下情况下我遇到了问题：

显示现有模态
现有模式关闭和不活动模式显示

问题是，如果后面的页面有垂直的scroll，则我的不活动状态modal正在显示它。 modal没问题，它没有按预期显示。

我使用过console，似乎没有将modal-open类添加到页面中，但是还没有添加很多其他styles之类的padding就像显示初始模态时一样。

这就像我尝试使用modal('show').on('show.bs.modal')和.modal('show').on('shown.bs.modal')一样，无法弄清楚它如何正常工作。

其他模式组件代码

created() {
    VueEvent.$on('show-addedit-address-modal', ( details ) => {
        this.passedDetails = details;

        VueEvent.$emit('pass-modal-details-to-inactivity-modal', { modalName: 'addEditAddressModal', details: this.passedDetails });
    });
}

活动模态组件

<template>
    <div class="modal fade danger-modal" id="inactivityModal" tabindex="-1" role="dialog" aria-labelledby="inactivityModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content danger-modal-content">
                <div class="modal-body text-center">
                    <h5 class="mb-3">Due to inactivity on the site, you will be logged out in:</h5>
                    <h5 class="mb-1">{{ logoutCountDown }} seconds</h5>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { InactivityMixin } from '../../mixins/InactivityMixin';

export default {
    name: "InactivityModal",

    mixins: [ InactivityMixin ],

    beforeCreate() {
        VueEvent.$on('show-inactivity-modal', () => {
            if (this.prevOpenedModal.modalName !== 'loader' || this.prevOpenedModal.length === 0) {
                $('.modal-backdrop, #adminAccountSelectModal, #addEditAddressModal, #deleteAddressModal, #authorizeOrderModal, #cancelOrderModal, #confirmDeleteModal, #detailsNotSavedModal, #errorModal, #orderSuccessModal, #cancelPreOrderModal').modal('hide');
            
                $('#inactivityModal').modal('show');
            }
        });
    },

    methods: {
        loggingOut() {
            console.log('Logging Out');
        }
    }
}
</script>

不活跃模式混合代码

export const InactivityMixin = {
    data() {
        return {
            events: ['click', 'mousemove', 'mousedown', 'keypress', 'scroll', 'load'],
            warningTimer: 0,
            logoutCountDown: 0,
            unwatched: false,
            prevOpenedModal: []
        }
    },

    mounted() {
        this.events.forEach((event) => {
            window.addEventListener(event, this.resetTimer)
        })
        
        VueEvent.$on('pass-modal-details-to-inactivity-modal', (data) => {
            this.prevOpenedModal = data;
        });

        this.setTimers();
    },

    destroyed() {
        this.events.forEach((event) => {
            window.removeEventListener(event, this.resetTimer)
        });

        this.resetTimer();
    },

    methods: {
        setTimers() {
            $('#inactivityModal').modal('hide').on('hidden.bs.modal', this.displayPrevModal);

            // Comment out below as only used for TESTING of the inactivity modal
            this.warningTimer = setTimeout(this.warningMsg, 5000);

            //this.warningTimer = setTimeout(this.warningMsg, 600000);
        },

        displayPrevModal() {
            if (this.prevOpenedModal.modalName === 'adminAccModal') {
                VueEvent.$emit('show-admin-account-select-modal');
            } else if (this.prevOpenedModal.modalName === 'addEditAddressModal') {
                VueEvent.$emit('show-addedit-address-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'deleteAddressModal') {
                VueEvent.$emit('show-delete-address-modal');
            } else if (this.prevOpenedModal.modalName === 'authorizeOrderModal') {
                VueEvent.$emit('show-authorize-order-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'cancelOrderModal') {
                VueEvent.$emit('show-cancel-order-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'confirmDeleteModal') {
                VueEvent.$emit('show-confirm-delete-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'launchDetailsNotSavedModal') {
                VueEvent.$emit('show-details-not-saved-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'errorModal') {
                VueEvent.$emit('show-error-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'orderSuccessModal') {
                VueEvent.$emit('show-order-success-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'CancelPreOrderModal') {
                VueEvent.$emit('show-cancel-pre-order-modal', this.prevOpenedModal.details);
            }
        },

        warningMsg() {
            this.unwatched = false;
            VueEvent.$emit('show-inactivity-modal');
            this.logoutCountDown = 60;
        },

        resetTimer(e) {
            this.unwatched = true;
            clearTimeout(this.warningTimer);
            this.setTimers();
        }
    },

    watch: {
        logoutCountDown(value) {
            if (value > 0 && !this.unwatched) {
                setTimeout(() => {
                    this.logoutCountDown--;
                }, 1000);
            } else if (this.unwatched) {
            } else {
                this.loggingOut();
            }
        }
    }
}

普通模式 不活动模式

我尝试将以下内容添加到“ Inact Modal”组件代码中

beforeCreate() {
        VueEvent.$on('show-inactivity-modal', () => {
            if (this.prevOpenedModal.modalName !== 'loader' || this.prevOpenedModal.length === 0) {                
                $('#inactivityModal').modal('show').on('shown.bs.modal', this.applyClass);
            }
        });
    },

    methods: {    
        applyClass() {
            $(document.body).addClass('modal-open');
        }
    }

但是无论出于何种原因，这不会在第二次显示“ Inct”模态时第一次触发，当它显示时，它会快速显示滚动条，然后将其隐藏而不是在渲染之前将其隐藏。 / p>

我认为使用shown.bs.modal和hiddenn.bs.modal就足够了，因为一旦modal完成渲染/隐藏后便会触发

在关闭一个模态时显示变量滚动，并显示新模态

0 个答案: