将 jquery 添加到 VueJS 3，以实现 Bootstrap 5 兼容性以使用模式

Question

我研究得越多，我就越困惑，所以请在投票之前记住这一点。大多数超过 5 分钟的资源大多毫无用处，这也无济于事。

Soo，最初我只是想在 vue 组件中包含一个 boostrap 模式，我可以通过事件总线进行切换（mitt）。单击模式外部不应将其关闭，按转义键也不应将其关闭。使用数据切换

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

应该是 解决方案，但它不起作用。 This 片段正是我想要实现的，但是在调用模态的按钮内设置

data-backdrop

，而不是模态本身。所以我已经很困惑了。此外，当删除代码片段中的 jquery 引用时，它会中断。所以看来我需要导入 jquery 才能在我的 vue 应用程序中正确使用 bootstrap 。我已经通过 npm 安装了 bootstrap 和 jquery，但是如何导入它... Sources 谈论 webpack，但我现在没有使用 webpack。

<script src=...>

显然在 vue 中不起作用，我不能只将其导入到

<script setup>

部分。将其导入内部

main.js

似乎也不起作用。

这是我当前的代码供参考（但这并不重要）：

<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');
})

inject('Events').on('error', function (e) {
    modal.show();
    data.message = e.message;
    data.details = e.details;
})


</script>
<template>
        <div tabindex="-1" id="errorModal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog modal-confirm">
                <div class="modal-content">
                    <div class="modal-header justify-content-center">
                        <h4 style="color: white;">Ooops! TODO: DISABLE ABILITY TO CLICK OF MODAL </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>

<!-- Design from from https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=elegant-error-modal -->
<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>

顺便问一下，我应该使用

import { Modal } from 'bootstrap'; 

与引导程序项目交互吗？我见过 50 种操纵它们的变体。标准方法是什么？

Answer 1

要使用 Vue 显示或隐藏 Bootstrap 模式，不需要 jQuery，只需使用 .modal 元素的类和样式即可：

• <div class="modal">...</div>

  -> 模式被隐藏

• <div class="modal show" style="display: block;">...</div>

  -> 模式可见

带有 showModal 引用的示例（但触发器可以是事件总线或其他任何东西）：

<script setup lang="ts">
import { ref } from 'vue'

const showModal = ref(false)
</script>

<template>
  <button @click="showModal = true">Show modal</button>

  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
    :class="{ show: showModal }"
    :style="{ 'background-color': 'rgba(0, 0, 0, .5)', display: showModal ? 'block' : 'none' }"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" aria-label="Close" @click="showModal = false"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>