项目实战，简单易懂，复制粘贴即可直接使用，不讲大框架，只分享实用技巧。

本篇文章中模态框插件引用自bootstrapv5.x，个人比较喜欢实用bootstrap这个web前端框架

要在Vue3中使用bootstrap插件实现模态框，你可以按照以下步骤进行：

导入bootstrap插件：在你的Vue3项目中，加入bootstrapv5.x的资源文件：

像这种出来比较早的插件，本人比较使用原生一点的，从官网下载然后导入到vue3工程的src目录下

引入bootstrap插件和样式：

在main.ts文件中引入css文件

import  '/src/assets/vendor/bootstrap/css/bootstrap.min.css'
import  '/src/assets/vendor/bootstrap-icons/bootstrap-icons.css'

在index.html文件中引入js文件

<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js" ></script>

编写模态框的html代码：

<div class="modal fade msyh" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title msyh" id="paymentModalLabel">请选择支付方式</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 单选按钮组 -->
        <div class="btn-group btn-group-toggle" data-bs-toggle="buttons">
          <label class="btn btn-secondary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked value="Alipay">
            <img src="@/assets/img/alipay/alipay.png" alt="支付宝" class="payment-icon" style="height: 24px; margin-right: 5px;"/>
            <span style="color:#3370FF" class="msyh">支付宝支付</span>
          </label>
          <label class="btn btn-secondary active">
            <input type="radio" name="options" id="option2" autocomplete="off" value="Wexpay"  v-model="selectedOption">
            <img src="@/assets/img/wechatpay-icon.jpg" alt="微信支付" class="payment-icon"
                 style="height: 24px; margin-right: 5px;"/>
            <span style="color:#3370FF" class="msyh">微信支付</span>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><span style="color:#fff" class="msyh">取消</span></button>
        <button type="button" class="btn btn-primary"><span style="color:#fff" class="msyh">确定</span></button>
      </div>
    </div>
  </div>
</div>

模态框效果图

总结

可根据自身业务需求进行调整模态框，分享不易，一起努力。有问题可私信交流