为VueJS 3引入jQuery以兼容Bootstrap 5模态框

一、解决模态框无法禁用外部点击/ESC关闭的问题 #

你用data-backdrop="static"和data-keyboard="false"没效果，是因为这是Bootstrap 3/4依赖jQuery时的写法。Bootstrap 5改用原生JS组件后，这些配置需要在实例化Modal时通过JS参数传入，而不是依赖HTML属性。

修改你的onMounted代码：

onMounted(() => {
    // 传入配置参数替代data属性
    modal = new Modal('#errorModal', {
        backdrop: 'static', // 点击外部不关闭
        keyboard: false     // 按ESC不关闭
    });
})

同时可以把模板里的data-keyboard="false"和data-backdrop="static"删掉，JS配置会覆盖HTML属性。

二、关于jQuery的误解 #

Bootstrap 5已经完全移除了jQuery依赖，你不需要在Vue项目中导入jQuery！之前的示例代码失效是因为它用的是Bootstrap 3/4的jQuery写法，和现在的Bootstrap 5原生JS组件不兼容。直接用import { Modal } from 'bootstrap'的方式就可以，完全不用管jQuery。

三、Bootstrap组件的标准使用方式 #

Bootstrap 5官方推荐的标准用法就是ES模块导入+原生JS实例化：

• 从bootstrap包中导入需要的组件（如Modal、Toast、Dropdown等）
• 在组件挂载后，通过构造函数实例化目标元素，并传入配置参数
• 调用实例的方法（如modal.show()、modal.hide()）控制组件状态

这种方式替代了旧的jQuery链式调用（$('#id').modal('show')），更符合现代前端的模块化理念，是当前的标准做法。

修改后的完整组件代码 #

<script setup>
import { onMounted, inject, reactive } from 'vue';
import { Modal } from 'bootstrap';

const data = reactive({ message: undefined, details: undefined })

let modal;
onMounted(() => {
    // 传入静态配置
    modal = new Modal('#errorModal', {
        backdrop: 'static',
        keyboard: false
    });
})

inject('Events').on('error', function (e) {
    modal.show();
    data.message = e.message;
    data.details = e.details;
})
</script>
<template>
        <!-- 移除无效的data属性 -->
        <div tabindex="-1" id="errorModal" class="modal fade">
            <div class="modal-dialog modal-confirm">
                <div class="modal-content">
                    <div class="modal-header justify-content-center">
                        <h4 style="color: white;">Ooops!</h4>
                    </div>
                    <div class="modal-body text-center">
                        <p>{{ data.message || 'UNKNOWN_ERROR' }}</p>
                    </div>
                    <div v-if="data.details" class="modal-footer">
                        <span class="me-auto">{{ data.details }}</span>
                    </div>
                </div>
            </div>
    </div>
</template>

<style>
body {
    font-family: 'Varela Round', sans-serif;
}

.modal-confirm {
    color: #434e65;
    width: 525px;
}

.modal-confirm .modal-content {
    padding: 20px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
}

.modal-confirm .modal-header {
    background: #e85e6c;
    border-bottom: none;
    position: relative;
    text-align: center;
    margin: -20px -20px 0;
    border-radius: 5px 5px 0 0;
    padding: 35px;
}

.modal-confirm h4 {
    text-align: center;
    font-size: 36px;
    margin: 10px 0;
}

.modal-confirm .form-control,
.modal-confirm .btn {
    min-height: 40px;
    border-radius: 3px;
}

.modal-confirm .close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    text-shadow: none;
    opacity: 0.5;
}

.modal-confirm .close:hover {
    opacity: 0.8;
}

.modal-confirm .icon-box {
    color: #fff;
    width: 95px;
    height: 95px;
    display: inline-block;
    border-radius: 50%;
    z-index: 9;
    border: 5px solid #fff;
    padding: 15px;
    text-align: center;
}

.modal-confirm .icon-box i {
    font-size: 58px;
    margin: -2px 0 0 -2px;
}

.modal-confirm.modal-dialog {
    margin-top: 80px;
}

.modal-confirm .btn,
.modal-confirm .btn:active {
    color: #fff;
    border-radius: 4px;
    background: #eeb711 !important;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    border-radius: 30px;
    margin-top: 10px;
    padding: 6px 20px;
    min-width: 150px;
    border: none;
}

.modal-confirm .btn:hover,
.modal-confirm .btn:focus {
    background: #eda645 !important;
    outline: none;
}

.trigger-btn {
    display: inline-block;
    margin: 100px auto;
}
</style>

内容的提问来源于stack exchange，提问作者pqzpkaot