当前位置:首页 > 技术分析 > 正文内容

Vue的干货分享-Vue3中的弹窗(模态框)的使用

ruisui884个月前 (02-27)技术分析30

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

本篇文章中模态框插件引用自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文件


编写模态框的html代码:

模态框效果图

总结

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2296.html

标签: vue弹窗组件
分享给朋友:

“Vue的干货分享-Vue3中的弹窗(模态框)的使用” 的相关文章

基于Ubuntu的Linux Lite 6.0发行版正式发布

开发者 Jerry Bezencon 今天宣布,基于 Ubuntu 的 Linux Lite 6.0 发行版正式发布。本次更新代号为“Fluorite”,基于 Ubuntu 22.04 LTS (Jammy Jellyfish) 系统,它由长期支持的 Linux 5.15 LTS 内核系列驱动。下载...

BuildKit 镜像构建工具

#暑期创作大赛#快速开始 对于 Kubernetes 部署,请参阅examples/kubernetes。BuildKit 由buildkitd守护进程和buildctl客户端组成。虽然buildctl客户端可用于 Linux、macOS 和 Windows,但buildkitd守护程序目前仅适用于...

el-table内容\n换行解决办法

问题请求到的数据带有换行符 '\n'但页面展示时不换行statusRemark: "\"1、按期完成计划且准确率100%,得100分;\n2、各项目每延误1天,扣1分;每失误1次或者员工投诉1次,扣3分,失误层面达到公司级影响较大的,该项绩效分数为0\"\n&...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...

uni-app基于vue开发小程序与标准vue开发新增点

1、路由跳转传参uni.navigateTo({ url: `/pages/transition/spreadTextAction?t=${this.options.t}&rt=${this.options.rt}&l=${this.options.l}`});uni.navigateBack({...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...