文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

对话框、模态框和弹出框看起来很相似，它们有何不同？

主要模式 让我们看看一些常见的模式以及如何区分它们。...据我今天的理解，它可以让我们自动将弹出框放置在最合适的位置，避免与窗口边缘发生碰撞。有点像今天的库，但内置于浏览器中。 为了定位弹出框，有一个非常令人兴奋的提议叫做CSS 锚点定位。...据我理解，它将允许我们自动定位在最合适的位置，避免与窗口边缘发生碰撞。有点像 Popper 库今天所做的，一旦提议实现那么将可以在浏览器中直接使用。...对于弹出窗口，它只在“有意义的地方”的情况下执行（请参阅弹出窗口解释器）。如果用户没有触发它，将它移动到 DOM 中较早的适当位置。 当模态对话框关闭时：如果用户触发了它，将焦点返回到触发器。...对于 popover，只有在“有意义”的情况下才会执行 (请参考 popover 解释器)。如果用户没有触发它，将焦点移动到 DOM 中适当的位置。

4K00
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    BuildAdmin10：ElementPlus的弹出框，真的用不了

    前言 我们在使用浏览器（例如chrome），或者一些IDE时，我们总会打开很多标签页，所以chrome和IDE提供了关闭所有、关闭右侧、关闭其他等批量关闭功能。...在BuildAdmin中，对导航栏的tab页同样也实现了这样的功能。...那么如何实现这样的一个弹出框，以及如何实现这些功能。 tab弹出框 BuildAdmin在src/components/contextmenu/index.vue中定义了弹出框组件。...我们先看上面代码的渲染结果： 我们可以看到，在tab栏中出现了一个点击按钮，右键这个按钮就会出现弹出框，但是我的诉求是点击tab触发弹出框，这不太符合我们的要求。...在研究了popover之后，发现el-popover的缺点：必须在插槽中定义一个按钮用来触发弹出框。 在Playground中进行测试，在删除了reference的slot之后，就会报错。

    73800

    BuildAdmin19：如何使用el-popover弹出框，实现个人资料页面

    >在上面的网页设计中，看起来比较复杂，但实际上都是el-popover官网的使用方法，我们只需要填鸭式操作即可。...在el-popover弹出框中，首先要与el-avatar组件实现的头像框绑定，然后定义弹出框的内容。使用el-popover预留的slot插槽即可实现。...个人资料在点击个人资料页面之后，会打开一个tab页，其实这就是一个路由的实现。...路由信息因为我这里还没有后台，所以路由信息的json都是写死在了代码中，至于后面动态渲染路由，就和BuildAdmin是一样的流程，在之前的BuildAdmin05：如何玩转Vue路由动态加载有提到。...BuildAdmin05：如何玩转Vue路由动态加载BuildAdmin07：导航栏动态添加tabs，vue如何实现

    38010

    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）

    在11月初的时候，我给自己定的目标：了解完 Vue3，然后做一个小项目 其中，Vue3 是早就学完了的，然后也写了两篇总结或是心得吧，其中有很多都是在做项目中踩出来的坑，所以大家可以看一下，避免之后开发中遇到...├── APP.vue └── main.jsss 重点介绍 对于项目的逻辑代码，你们可以直接查看我的源码，全部都是用的 Vue3 语法写的 在最初做这个项目时，还没找到合适的 Vue3...，把所有的 message 实力管理在一个数组中 然后我们要把其作为一个方法注册到全局中，这个我就把它放在了 App.vue 文件中，通过 Vue3 的 provide 方法暴露在全局 的出现位置，因此我想把这个组件做成通过自定义指令 v-popover 来调用 接下来看下我的设计过程哈 首先是组件的内容： // lp-popover.vue <template...哈哈哈，这样就成功导入文件啦~ ✔ Scroll Animation 因为我们所有的 URL 都是在一个页面内的，并且搭配着侧边栏中的按钮进行标签的跳转，即在左侧点哪个标签，右侧的内容就跳到哪个标签。

    2.7K41

    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）

    在11月初的时候，我给自己定的目标：了解完 Vue3，然后做一个小项目 其中，Vue3 是早就学完了的，然后也写了两篇总结或是心得吧，其中有很多都是在做项目中踩出来的坑，所以大家可以看一下，避免之后开发中遇到...├── APP.vue └── main.jsss 重点介绍 对于项目的逻辑代码，你们可以直接查看我的源码，全部都是用的 Vue3 语法写的 在最初做这个项目时，还没找到合适的 Vue3...，把所有的 message 实力管理在一个数组中 然后我们要把其作为一个方法注册到全局中，这个我就把它放在了 App.vue 文件中，通过 Vue3 的 provide 方法暴露在全局 的出现位置，因此我想把这个组件做成通过自定义指令 v-popover 来调用 接下来看下我的设计过程哈 首先是组件的内容： // lp-popover.vue <template...哈哈哈，这样就成功导入文件啦~ ✔ Scroll Animation 因为我们所有的 URL 都是在一个页面内的，并且搭配着侧边栏中的按钮进行标签的跳转，即在左侧点哪个标签，右侧的内容就跳到哪个标签。

    1.2K20

    【实战】Vue.js 图标选择组件开发

    在项目中本人使用的是 Fontawesome 图标库方案，使用它是因为提供的可用图标比较丰富，基本上不需要特意去找合适的图标，直接把它的图标库下载过来，免费的有800多个。...name放到一个 solid.js 文件中，输出为数组，在组件中引入，然后就是循环数组 iconList，输出i标签，Fontawesome 的使用方式是：<i class="fas fas-图标name...default Icons; 第4行为组件命名，此名称决定了如何使用组件，这里是ui-icons，那么使用的时候就是： 接着在项目 components 根目录新建 index.js.../components/index.js' Object.keys(CustomComponents).forEach(key => Vue.use(CustomComponents[key])) 这样就可以在项目中任意....vue文件中以方式使用组件了。

    3.3K10

    Human Interface Guidelines —— Popovers

    在iPhone的app中，因为位置有限，一般在全屏的模态视图中呈现信息，而不是在popover中。...在大多数情况下，当有人在popover之外区域点击或选择popover中的项目后，popover应该关闭。...·将popover放在屏幕中适当的位置  popover的箭头应直接指向弹出它的元素。由于popover无法在屏幕上拖动，因此popover不应包含人们在使用popover时可能需要查看的基本内容。...如果需要显示新的popover，请先关闭打开的popover。 ·不要在popover上显示另一个视图 除了alert外，任何东西都不应该显示在popovers上方。...·避免让popover过大 Popover不应该占用整个屏幕。最好使其大小刚好能展示内容，并指向出现的地方。请注意，系统可能会调整popover的大小以确保它适合屏幕显示。

    1.3K110

    揭秘vuereact组件库中🤚5个作者不造的轮子

    , 作者应该是阿里的员工, 而且也是ant design的代码维护者. moment | day.js(操作时间) ant design在DatePicker组件中用了moment....(气泡对话框) element-ui和iview的tooltip和popover组件都是基于vue-popover实现的, 而vue-popover只是对popper做了一层vue的封装, 所以气泡对话框的核心是...) 基本所有的ui组件库都在用, 让低版本浏览器也支持Resize Observer API, 这样我们可以放心的监视元素的尺寸变化...., 基于对写代码的热情, 我用ts写了2个小插件, 抽象了一些组件中重复的代码, 大家看下是否需要. any-touch 一个手势库, 支持tap(点击) / press(按) / pan(拖拽) /...(滑动) / tabs(标签页)等都需要"拖拽识别" swipe(滑) carousel/tabs的切换下一幅, scroll的快速滑动等. pinch(捏合) / rotate(旋转) pinch用来缩放商品图片

    1.4K20

    一个 Vue + Node + MongoDB 博客系统

    源码 耗时半载（半个月）的大项目终于完成了。这是一个博客系统，使用 Vue 做前端框架，Node + express 做后端，数据库使用的是 MongoDB。...使用 vue-resource 从后台获取数据，数据的处理全部都在前端，所以后端要做的事情很简单——把前端打包好的数据存进数据库中和从数据库中取出数据。前后端使用统一的路由命名规则。...我在 App.vue 中使用了命名视图，因为 sidebar 这个组件有的页面需要有的不需要，不需要的时候就不用加载。 项目相关的优秀项目的源码，学习别人如何组织代码。 自己的解决方案不一定是最优解，不过在找到最优解之前不妨自己先试试。 框架模块的使用都不难，套API的活每个人都能干，只是快与慢的差别。...尝试思考这个API是如何实现的。 了解了完整的web应用是如何运作的，包括服务器，数据库，前端是如何联系在一起的。

    1.6K20

    我在大厂写React，学到了什么？

    前言 我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧解决一些实际问题，本文中使用的代码都是简化后的，不代表生产环境。...以 URL 为数据仓库 在公司内部的后台管理项目中，无论你做的系统面向的人群是运营还是开发，都会涉及到分享，那么保留「页面状态」就非常重要了。...比如我是运营 A，在使用一个内部数据平台，我一定是想向运营 B 分享某 App 的消费数据的第二页，并且筛选为某个用户的状态的网页，并且进行讨论。那么状态和 URL 同步就尤为重要了。...在传统的状态管理思路中，我们需要在代码里用redux、recoil等库去做一系列的数据管理，但是如果把 URL 后面的那串 query 想象成数据仓库呢？...扫描出代码中需要替换文本的位置，修改 AST 把它转为方法调用即可，比较麻烦的点在于需要考虑各种边界情况，我写过一个比较简单的例子，仅供参考： github.com/sl1673495/b… 这样的一段源代码

    1.5K10

    我在工作中写React，学到了什么？

    前言 我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧解决一些实际问题，本文中使用的代码都是简化后的，不代表生产环境。...取消请求 React 中当前正在发出请求的组件从页面上卸载了，理想情况下这个请求也应该取消掉，那么如何把请求的取消和页面的卸载关联在一起呢？...以 URL 为数据仓库 在公司内部的后台管理项目中，无论你做的系统面向的人群是运营还是开发，都会涉及到分享，那么保留「页面状态」就非常重要了。...比如我是运营 A，在使用一个内部数据平台，我一定是想向运营 B 分享某 App 的消费数据的第二页，并且筛选为某个用户的状态的网页，并且进行讨论。那么状态和 URL 同步就尤为重要了。...在传统的状态管理思路中，我们需要在代码里用redux、recoil等库去做一系列的数据管理，但是如果把 URL 后面的那串 query 想象成数据仓库呢？

    91430

    2019 TWeb 腾讯前端技术大会精彩回顾

    以下是 strapi 的视频介绍: 分享主题: 《腾讯 OMI +》 - OMI 框架前端生态赋能与创新实践 讲师: 张磊 - 知名开源框架 OMI 作者 该分享的 PPT 就有 80 多页, 现场分享更是一度超时...要做 SSR 并不容易, 首先我们要保障 Node 服务的稳定性, 期间我们可能会遇到如下问题: 磁盘占用过多 内存负载变高 内存溢出 Node 服务发生错误 Node 宕机 扩缩容, 机器裁撤 另外还要考虑如何让一套代码两端共用...如上图所示, 用户在腾讯云的 serverless 平台上, 上传云函数的代码(或直接用在线编辑器编写) ? 保存后, 我们可以设置触发器, ?...而后边在提供支持的 BaaS, 则提供了很多后端服务, 像 AI, 我们可以调用语音图像的识别接口, 还可以轻易地调用云 DB, 而云 DB 也不需要我们人工维护, 还有对象存储, 诸如图片, 视频上传...腾讯云 serverless devOps 腾讯教育在内部的实践中, devOps 也很完善了, 整个流程如下: ?

    1.4K10

    antd popover定位不准闪跳解决+自己实现popover库

    前言 我在写H5-dooring时，发现我们用的popover会发生闪跳，而且第一次闪跳就算了，每次还会有另一个方向的闪跳。...可以看见，第一次显示会在左边，后续显示位置都ok。所以思路就是让其在第一次显示时进行处理，顺便实现动画效果，不至于出现那么突兀。...另外，需要暴露出强制刷新方法，在某些情况下需要刷新函数，比如监听windows的resize事件，这样位置变化后，再点击，就不会出现到原来的位置了。...可以看看我的popover最终在H5编辑器(H 5-Dooring)里的效果，完全可以替代antd的popover组件且轻量. popover地址：https://www.npmjs.com/package...目前我们的H5-Dooring第一个落地版本基本完成, 主要实现功能如下: 组件库拖拽和显示 组件库动态编辑 H5页面实时/扫码预览功能 下载H5页面配置文件 保存为模版库功能 H5移动端跨端适配 媒体组件

    2.4K51

    Vue面试题-02

    本篇包括： ✅计算属性和侦听器的区别 ✅事件修饰符 ✅单页应用(SPA) VS 多页应用(MPA) ✅如何解决SPA首屏加载速度慢 ✅v-if和v-for的优先级 计算属性和侦听器的区别 计算属性...我们熟知的JS框架如react,vue,angular,ember都属于SPA 图片 MPA（MultiPage-page application），翻译过来就是多页应用。...在MPA中，每个页面都是一个独立的主页面。当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载。...缺点 不利于搜索引擎的抓取；首次渲染速度相对较慢(加载整个项目使用的css、js) 页面跳转较慢 参考链接： 说说你对SPA的理解 https://vue3js.cn/interview/vue/spa.html...vue在官方文档中明确指出，永远不要把 v-if 和 v-for 同时用在同一个元素上 在 Vue 2 中，v-for 优先于 v-if 被解析，即先执行循环，后判断条件。

    2.2K30

    使用组件的state机制实现屏幕取词

    我们增加一些新代码，目的就是把关键字解析时，夹在关键字中的代码提交给词法解析器解析，并识别出其中的表示变量的字符串，把这些字符串及其对应的token收集到数组textNodeArray中，这些信息收集完毕后...于是当mouseenter发生时，我们就可以在鼠标旁边弹出popover控件，当mouseleave发送时，我们就把popover控件给关闭掉，这样一来我们就可以实现屏幕取词的效果了。 ?...现在我们看看上面的popover控件是如何弹出的，由于它是boostrap提供的控件，因此我们在组件的render()函数中需要把它添加进来： render() { let textAreaStyle...单页应用开发有一个难点就在于如何让程序底层数据与外在界面的展示实现实时联动。比如说我在程序底层有一个数据叫counter, 它的值是1，在页面上就可以把这个值显示出来。...在组件启动时，我们先把popover窗体挪动到界面之外，让用户看不到它的存在，一旦用户把鼠标挪动到某个变量字符串上时，包裹着变量字符串的span它会触发mouseenter事件，在响应该事件时，我们得到鼠标当前所在的位置

    1.1K21

    我是如何提高Spring Boot+Vue前后端分离项目首页加载速度的

    ElementUI 按需加载 1.1 问题复现 先来看松哥录制的一段视频： 不做任何优化，我们一般是在 main.js 中按照如下方式来引入 ElementUI 的： import ElementUI...但是按照上面这种引入方式，除了 css，其他组件全部都引入到项目中了，最新版的 ElementUI 中的组件已经接近 60 个了，但是我们项目中用的组件可能没有这么多，这些最终没用上的组件就会造成资源浪费...在不做任何优化的情况下，我们通过如下命令对项目生成 report.html 用来帮助我们分析包内容： vue-cli-service build --report 该命令执行的日志如下(截取了关键部分)...同时大家注意到，此时在前端 dist 目录下还有一个文件叫做 report.html，这是生成的打包报告，我们在浏览器打开这个页面，如下： 在这个 html 页面中，通过可视化页面向我们展示了到底是谁把...我们在后端 application.yml 中添加如下配置，开启 gzip 压缩： server: compression: enabled: true 配置完成后，重启后端项目，访问项目首页

    1.1K00

    Vue实际中的应用开发【分页效果与购物车】

    作者 | Jeskson 来源 | 达达前端小酒馆 分页组件 首先来创建项目： 分页组件，做项目不要写动手写代码，要想想业务逻辑，怎么写，如何写才是最好的呈现方式，做项目不急，要先想好整体的框架，...你想想，当前页，是不是有，curpage当前页，每页的大小，pagesize，总的页数，total，等等，考虑不到的，没关系看看别人的有什么，想好后才写代码，那才快。 不说无用，先创建项目： ?...那就先写那么多，然后再想想需要什么： 总页码 = Math.ceil(总记录数/每一页记录数） 总页码数，7页，或6页，当前是向上取整，每一页记录数10页，总记录数，总的多少页。...$emit('input', this.count); } vue中监听input输入值变化的事件，原生事件； this.$emit()，是触发器，用于父子组件的传值。 this....emit方法派发的input事件，父组件监听input事件中传递的value值，并存储在父组件data中，然后父组件通过prop的形式传递给子组件value值，在子组件中绑定Input的value属性。

    1.1K30

    ASP.NET MVC使用Bootstrap系列（4）——使用JavaScript插件

    为了使用Bootstrap插件，我们需要添加Bootstrap.js或者Bootstrap.min.js文件到项目中。...注：将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素中。...Bootstrap的模态框本质上有3部分组成：模态框的头、体和一组放置于底部的按钮。你可以在模态框的Body中添加任何标准的HTML标记，包括Text或者嵌入的Youtube视频。... 你可以添加data-toggle="tooltip"来使用tooltip，当然你也可以设置内容的显示位置，通过添加data-placement属性来实现，Bootstrap为我们提供了4种位置...你可以在许多网站上看到这种组件，要使用它也是非常方便的： 将Carousel组件被包含在一个class为carousel以及data-ride为"carousel"的元素中。

    5.2K60
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券