在vue 中使用bootstrap5的modal

编者使用的场景记录：为了添加一个loading 的 mask

1、在vue 项目中引入最新版bootstrap【"bootstrap": "^5.1.3"】：npm install --save bootstrap

2、在main.js引入bootstrap：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

在vue页面引入bootstrap Modal：

import { Modal } from 'bootstrap”，

注意：引入Modal是为了使用js控制Modal（使用按钮控制可以不引入）

代码

按钮控制html：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    打开模态框
</button>

<div class="modal-static fade" id="myModal">
    <div class="modal-dialog" style="width: 200px;height:40px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px; color: #fff;">
        <h5>正在加载...</h5>
    </div>
</div>

js控制

 html

<div class="modal-static fade" id="myModal">
    <div class="modal-dialog" style="width: 200px;height:40px; z-index: 20000; position: absolute; text-align: center;left: 50%; top: 50%;margin-left:-100px;margin-top:-10px; color: #fff;">
        <h5>正在加载...</h5>
    </div>
</div>

js控制：当前在mounted模块中 

mounted() {
    let myModal = new Modal(document.getElementById('myModal'));
        myModal.show();
				
}

 效果图(js控制):

 效果图（按钮控制）