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

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

ruisui882个月前 (02-27)技术分析21

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

本篇文章中模态框插件引用自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中的弹窗(模态框)的使用” 的相关文章

专为系统管理员设计的LINUX发行版SYSLINUXOS

SysLinuxOS 承诺“结束为管理任务寻找正确工具”的局面,提供“非常广泛的软件选择,特别是用于使用互联网”。译自 SysLinuxOS, A Linux Distro for System Administrators,作者 David Cassel。全球各地的系统集成商正在发现 SysLin...

深入理解Vue.js组件通信:父子组件与子父组件数据交互详解

什么是Vue组件通讯 Vue.js 组件通信是指在 Vue 应用的不同组件之间进行数据交换和状态同步的过程。由于 Vue 的组件是基于单文件组件(SFCs)的模块化设计,每个组件都有自己的作用域,因此它们不能直接访问彼此的数据。为了使组件之间能够协同工作,Vue 提供了几种不同的通信方式。以下是 V...

vue中如何在自定义组件上使用v-model和.sync

自定义事件tips推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)changeData ×change-data √自定义组件的v-model用法:父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data...

博信股份新战略后再推新品 TOPPERS E2耳机售价199元

中新网6月21日电 20日,博信股份在北京正式推出新品TOPPERS主动降噪耳机E2,这是博信股份继2月战略暨新品发布会后的第二次新品亮相。价格方面,TOPPERS主动降噪耳机E2零售价199元,并于6月20日下午4点在京东商城公开销售。据介绍,TOPPERS主动降噪耳机E2采用AMS(奥地利微电子...

佳能 EOS R8 深度评测

佳能 EOS R8 的定位是入门级全画幅无反光镜可换镜头相机。尽管在产品阵容中处于这一位置,R8 仍然是一个强大的相机,配备了先进的 R6 II 同款成像传感器、快速处理器和令人难以置信的自动对焦系统,体积小、重量轻、价格低。这款相机是发烧友、旅行者、家庭以及任何想要全画幅传感器相机的人的绝佳选择。...

尤雨溪:细聊 Vue 的现在与未来

大家好,我是 Echa。创作不易,喜欢的老铁们转发加个关注,点个赞,速速收藏,谢谢!另外咱们一起回顾一下Vue 优秀开源项目:12个又简单又实用的开源项目及组件推荐13个又热门又实用的Vue开源宝典库推荐7个Vue 3的高颜值UI组件库分享15个基于Vue3.0全家桶的优秀开源项目推荐10个基于Vu...