phpscript弹窗技巧_Vue的干货分享Vue3中的弹窗模态框的运用

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

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

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

bootstrap资源文件存放位置

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

bootstrap干系js引入项目

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

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

bootstrap干系js引入项目

<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js" ></script>编写模态框的html代码：

模块框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>模态框效果图

模态框效果

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