当前位置: 首页 > news >正文

vue3--通用组件 popup 封装

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

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

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

  • 当popup展开时,内容视图应该不属于任何一个组件内部,而应该直接被插入到body下,这里需要用到vue3提供的新组件--Teleport 瞬移组件
  • popup应该包含两部分内容,一部分为背景蒙版,一部分为内容的包裹容器
  • popup应该通过一个双向绑定进行控制展示和隐藏
  • popup展示时,滚动应该被锁定
  • 内容区域应该接受所有的attrs,

http://www.mrgr.cn/news/47730.html

相关文章:

  • 内网穿透的应用-Ubuntu本地Docker部署Leantime项目管理工具随时随地在线管理项目
  • XGBoost算法在自定义数据集中预测疾病风险
  • ue5 按下ctrl,角色蹲下/解除蹲下。添加角色蹲伏动画。动画蓝图和状态机,状态,状态别名
  • R语言的正则表达式
  • Docker中运行Qt应用程序——待继续研究
  • Dart语言的语法
  • 猫头虎分享:Python库 Django 的简介、安装、用法详解入门教程
  • 如何用源码快速搭建属于你的外卖系统?
  • 推进大模型在数字政府中的应用
  • 通信接入技术
  • Windows下MYSQL8.0如何恢复root权限
  • iPhone 16的最佳充电搭子——慧能泰PD快充芯片HUSB339D
  • 独家重磅发布《2024银发流量全景洞察报告》
  • 【MySQL】入门篇—数据库基础:数据库的定义与用途
  • 当在浏览器中输入一个网址后,按下回车时,会触发一系列的过程
  • HiGPT:异构图语言模型的突破
  • QT元对象系统特性详细介绍(信号槽、类型信息、动态设置属性)(注释)
  • 自媒体工具箱 v1.0,支持涂抹加水印、无水印下载、加水印、消除原声、视频压缩
  • java实现发送验证码通过qq邮箱方式
  • ARM编程四--->中断编写流程
  • 数据的存储之整型与浮点型数据在内存中的存储方法
  • PyEcharts教程(004):Faker介绍
  • 高校党费收缴系统小程序的设计
  • 【高性能群集部署技术】HAProxy
  • 【linux 多进程并发】0201 Linux进程fork内存空间,父子进程变量内存地址居然是一样的
  • Vue CLI 创建项目