vue3--通用组件 popup 封装

于 2024-10-11 08:31:12 发布
阅读量106 收藏
点赞数 5
分类专栏： Vue3 文章标签： vue 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/142843706
版权

在业务场景中，假设这里我们要实现点击 汉堡 后，会有一个自下而上的popup弹出层 

因此这里我们需要先实现这样的一个公共的popup弹出层

那么我们这里的popup弹出层需要具备以下能力：

  • 当popup展开时，内容视图应该不属于任何一个组件内部，而应该直接被插入到body下，这里需要用到vue3提供的新组件--Teleport 瞬移组件
  • popup应该包含两部分内容，一部分为背景蒙版，一部分为内容的包裹容器
  • popup应该通过一个双向绑定进行控制展示和隐藏
  • popup展示时，滚动应该被锁定
  • 内容区域应该接受所有的attrs，
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小白小白从不日白
关注
专栏目录
订阅专栏
vue 通用弹框封装（van-popup为vant框架基础组件,el-dialog为element组件）
leng0920的博客
10-29 6683
通用弹框封装
Vue常用组件库集合---kalrry
kalrry
01-08 3254
Vue.js常用插件集合---kalrry前言一、Vue.js UI组件二、Vue.js开发框架三、Vue.js实用库四、Vue.js服务端五、Vue.js辅助工具六、Vue.js应用实例七、Vue.js Demo示例八、详细分类01、UI组件及框架02、滚动scroll组件03、slider组件40、编辑器05、图表06、日历07、地址选择08、地图09、播放器10、文件上传11、图片处理12、提示13、进度条14、开发框架汇总15、实用库汇总 前言 Vue是主流的前端框架，Vue.js常用插件可以提升开
Vue3封装全局Dialog组件
前端咸鱼翻身的博客
05-03 2799
本文通过封装可多次弹出的 Dialog 组件进一步探索了 Vue3 函数式组件的封装方法
vue常用组件库
热门推荐
qq_45059900的博客
05-11 1万+
目录 前言 一、Vue.js UI组件 二、Vue.js开发框架 三、Vue.js实用库 四、Vue.js服务端 五、Vue.js辅助工具 六、Vue.js应用实例 七、Vue.js Demo示例 八、详细分类 01、UI组件及框架 02、滚动scroll组件 03、slider组件 04、编辑器 05、图表 06、日历 07、地址选择 08、地图 09、播放器 10、文件上传 11、图片处理 12、提示 13、进度条 14、开发框架汇总 15、实用库汇总
Vue - - >组件库和插件库
404路西法的博客
07-16 775
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端样式一致的响应式 U...
vue -封装一个弹出层组件（组件之间的通信）
cwcnl25131的博客
04-20 840
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！
记一次Vue3组件简单封装的过程
parade岁月的博客
06-23 2299
一次Vue3组件简单封装的过程
Vue3封装全局弹窗组件(结合el-dialog)
HelloWorldLJY的博客
05-18 9193
在main.ts中 import App from "./App.vue"; import SubDialog from '@/components/sub.js' let instance: any = null; instance = createApp(App) instance.use(SubDialog) instance.mount(document.getElementById("app")} 在components下的sub.js import SubDialog from './SubD
vue-element-admin框架 通用弹窗封装、信息确认框封装、滚动条优化（三）
qq_32812063的博客
06-23 1560
封装
前端开发：Vue封装通过API调用的组件的方法
软贱开发攻城狮
12-25 2365
在前端开发中，关于Vue的使用相比大家并不陌生，而且Vue框架的优势也是其他框架所不能比的，尤其是Vue的封装思想更是堪称一绝，还有就是组件化的运用实践过程也是亮点。所以关于Vue框架的使用想必看官都不陌生，而且常用的核心技术点就那么点，本文就来分享一下关于通过Vue封装API调用组件的使用，记录一下，方便后期查阅使用。单例模式(Singleton)，也叫单子模式，在软件开发中是一种常用的软件设计模式。
【自定义组件】uniapp&vue开发，自定义封装组件步骤
weixin_48596030的博客
06-15 1400
学会封装代码，是程序猿必备的能力。 避免在开发过程中多处施展cv大法，封装代码有利于提升代码的复用性，可以大大减少复制粘贴带来的冗余代码。 以下是封装代码的具体步骤：在项目文件夹里创建一个与page平级的components页面，并在里面创建一个与该组件名相同的页面：（注意：不用在pages.json文件里再去配置了。）此处我这里并没有进行组件传参，只是在多个页面使用到了该组件。以下是需要配置的内容： 到这里为止，我们组件就封装完成了，接下来是在其他页面使用该组件。打开使用组件的页面，导入并且注册组件。.
vue组件列表
lb812383331的专栏
07-08 1623
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/airyland/vux" Vux 基于Vue和WeUI的组件库 https://github.com/ElemeFE/mint-ui" mint-ui Vue 2的移动UI元素 https://github.com/iview/iview" iview 基于 Vuejs 的开源 UI 组件库 https...
Vue组件汇总
2401_84446787的博客
04-29 778
★210 - 创建VueJS动态表格★205 - vue图片剪裁上传组件★204 - 所见即所得的编辑器★203 - VueJS的双向下拉刷新组件★202 - 在vue1和vue2中使用滑块★200 - Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室★179 - 基于Vue的markdown编辑器★173 - VueJS的3D轮播组件★170 - 基于 Vue 2的百度地图组件库★170 - 精美的点击提示对话框★168 - 粒子背景的vue组件。
基于 Vue3打造前台+中台通用提效解决方案（上）
oschina_41559824的博客
03-04 1692
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？ 如果大家对的构建机制有了解的话，那么应该可以发现一个问题。 那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在 的内容怎么办?是不是就意味着无法解析呢? 是的! 在 的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。 比如 因为
前端面试题（十三）
上进！努力！！！
10-10 883
前端面试题（十三）
GDPU Vue前端框架开发 ecmascript6初步使用
最新发布
嫌人闲事
10-10 553
前端框架基础，打造你的前端应用。
前端框架对比和选择
Hellc007的博客
10-10 687
React概述: React 是由 Facebook 推出的前端库，主要用于构建用户界面。它采用组件化的开发思路，使用虚拟 DOM 提高性能。特点只负责视图层强大的生态系统 (如 Redux、React Router)JSX 语法适合场景: 单页面应用（SPA）、大中型项目。开发难度: 中等Vue.js概述: Vue 是由尤雨溪开发的渐进式框架，开发者可以逐步将它集成到现有项目中。它的学习曲线平滑，文档详实。特点双向数据绑定组件化开发轻量且易于集成适合场景。
免费气象可视化的前端框架概述
专注AI大模型,软件混淆,授权
10-10 550
用于气象可视化的前端框架，通常需要具备处理大规模数据、交互性和动态更新的能力。
vue3 table vue3-seamless-scroll组件的封装
11-29
很抱歉，根据提供的引用内容，我无法回答关于"vue3 table vue3-seamless-scroll组件的封装"的问题。因为引用内容中提到的是"vue-seamless-scroll"组件，而非"vue3-seamless-scroll"组件。同时，引用内容中也没有提到与table相关的内容。请提供更多相关信息或者明确问题，我将尽力回答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值