Ant-design Modal在通过道具进行控制时不关闭 - 腾讯云开发者社区

Input、Select 的 value 为 undefined 时改为非受控状态。 Table 重写在没有 columns 时仍然会保留一列。...# 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src # 或者全局安装 # 使用 npm npm i -g @ant-design...对于无法自动修改的部分，codemod 会在命令行进行提示，建议按提示手动修改。修改后可以反复运行上述命令进行检查。 ? 注意 codemod 不能涵盖所有场景，建议还是要按不兼容的变化逐条排查。...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。...如果你在升级过程中遇到了问题，请到 GitHub issues 和 codemod Issues 进行反馈。我们会尽快响应和相应改进这篇文档。

5.9K1 0

Ant-design Modal实现可以拖动的效果

最近项目组在开发的时候提出了一个需求，需要让 ant-design Modal实现能够拖动的功能，研究了一番，基于 and-design Modal自己封装了一个antd-draggable-modal...特性：支持弹出窗居中打开支持拖拽 title bar 实现拖拽支持多层弹窗拖拽实现原理要实现 Modal 的拖拽，首先要弄清楚 Modal 的位置跟什么有关系，打开浏览器，通过 F12 调试窗口可以看到...因此接下来的思路就很简单了，通过监听鼠标事件来设置 ant-modal-content 元素的 transform 属性来实现 Modal 位置的调整。...simpleClass 类来定位弹窗位置当有多个弹窗时，可以通过 simpleClass 类来区分不同的弹窗，实现多层弹窗拖拽功能用法上需要注意的一点是： {this.state.visible...，也就是说弹窗关闭再打开的时候我们希望弹窗的位置会重新被初始化。

3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何优雅地解决多个 React、Vue 应用之间的状态共享

，所以我们用 Webpack 进行多入口打包，打出多个 React 应用，然后在这个页面通过引入 sdk 的方式挂载业务组件。...一、将状态挂载在全局 window 对象、EventEmitter 触发更新使用类继承 EventEmitter 通过在类中申明公共变量来进行存储和共享数据，使用事件订阅发送的方式来实现数据共享以及更新...，这让我想到了 Ant-Design 中 Modal，在需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。...我们来看看 Ant-Design 源码是通过什么来实现的呢？我们先找到 Ant-Design 的 Modal 组件的弹窗，发现弹窗是通过 rc-dialog 包实现的。 ? ?...React、Vue 可以控制 Portal 节点及其生命周期 —— 通过 Portal 渲染子元素时，React、Vue 仍然可以控制其生命周期。

1.9K2 0

微前端x重构实践落地总结

当没有需求时，在新项目（子应用）重写页面，重写完了之后，在老项目（主应用）中加载新项目的页面，下掉老项目的页面当有需求时，也是在新项目（子应用）重写面面再做对应需求（向产品要多点时间），重写完了之后，...升级版架构上图的架构有一个问题就是，当每次点击侧边栏的 MenuItem 时，都会加载一次微应用的子页面，也即：微应用子页面之间的切换，其实就是在微应用里路由切换嘛，大可不需要通过重新加载一次微应用来做微应用子页面的切换...ant-design 的 Modal、PopoverDrawer 的实现方式就是要挂在到 document.body 上的，这么一隔离，它们一挂在整个元素起飞了。...具体可见 Issue: 子应用全局变量 undefined 主应用切换路由时不更新子应用路由只要主子应用都用上了 Hash 路由，那么很大概率会遇到这个问题。...这是因为在主应用切换路由时不是通过 location.url 这种可以触发 hash change 事件的方式来变更路由，而 react-router 只监听了 hash change 事件，所以当主应用切换路由时

9782 0

Ant Disign 4.0 升级实践扑街指南 (一)

于是周六的时候，懒觉我也不睡了，跑到公司开始了升级之旅。注：此篇文章仅是我个人升级的时候遇到的一些问题，不具代表性，仅供参考。...于是我敲下了第一行命令： sudo npm i -g @ant-design/codemod-v4 全局安装了这个代码转换工具，很顺利。...fields 对 Form 进行控制。...表单控制调整 Form 自带表单控制实体，如需要调用 form 方法，可以通过 Form.useForm() 创建 Form 实体进行操作： // antd v3 const Demo = ({ form...在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。所以， initialValue 只能作为组件初次挂载的时候生效。

1.4K1 0

写给 vue2.0 开发者的 vue3.0 教程

传送内容如果您以前创建过模态特性，您就会知道它通常被放置在关闭的标记之前。 <!...然而，它仍然会像它在层级中的最初位置一样工作(关于道具，事件等)。因此，在您保存代码之后，重新加载页面，在开发工具中检查DOM，您会感到惊讶!...Learn more:Teleport RFC 发出一个事件现在让我们在模态中添加一个按钮来关闭它。...让我们通过向组件添加样式标签来开始对该内容进行样式化。...问题是，当槽内容仍然属于父内容时，在编译时确定了作用域样式。 Vue 3提供的解决方案是提供一个伪选择器::v- sloated()，允许您使用提供插槽的组件中的作用域规则来锁定插槽内容。

2.7K4 0

优秀组件设计的关键：自私原则

考虑的迭代也许，展示一个体贴的组件的最好方式是通过走过一个组件的生命周期。我们将能够看到它们是如何开始时很小，功能很强，但一旦设计发展起来就会变得很笨重。...迭代4 为了提供一种反馈感，这个确认用户界面阶段被设计为在物品被成功添加到购物车时临时显示。也许这个时候，开发团队会选择对产品需求进行反击。...按钮如何通过体现 "团队中的M-E "的态度来避免这种限制？我，我自己，还有UI 当组件对它所显示的内容负责时，它就会崩溃，因为内容将永远永远地改变。...通过将Button转移到支持子内容的本地方法，不再需要各种与图标相关的道具。现在，一个图标可以在Button的任何地方呈现，无论其大小和颜色如何。...也有一个关闭按钮。在Upload Successful 中，有一个修改过的页眉，没有关闭按钮和一个类似英雄的图像。页脚的按钮也被拉长了。

1.8K3 0

Ant Design 4.0 正式版来了！

用户需要通过 Form.create 的 HOC 方式获得表单实例，而通过 form.getFieldDecorator 来对组件进行数据绑定。...在 v4 版本中，Form 将自带表单实例，你可以直接通过 Form.Item 的 name 属性进行数据绑定，从而简化你的代码： - const { form } = this.props; - const...此外，Form 提供了 hooks 方法 Form.useForm 允许你对表单示例进行控制： const [form] = Form.useForm(); React.useEffect(() =>...，因而大大减少了表单拥有固定列时的性能消耗。...Notification/Modal 提供 Hooks 在过去版本，你或许会遇到 Modal.xxx 和 Notification.xxx 调用方法无法获得 Context 的问题。

3.1K3 0

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

将 Modal.method() 中字符串 icon 属性的调用转换成从 @ant-design/icons 中引入 antd4-codemod 上图这类报错是 Icon 组件自动替换错误，有 2 种处理方式...它会接收 render props，从而允许你对此进行控制。这里稍微注意一下，请勿在设置 shouldUpdate 的外层 Form. Item 上添加 name，否则，你会得到一个 error。...优点：・根据正常文档流进行定位・相对最近滚动祖先 & 最近块级祖先进行偏移缺点：・不兼容 <= IE11 解决了使用 absolute | fixed 脱离文档流无法撑开高度的问题，也不再需要对高度进行测量...在 antd4 中，还是可以通过 props 找到参数，只不过 antd 会把所有参数使用 data 进行包裹，就需要改成 nodeData.props.data.data。...这个变化同样适用于 Table 组件，可通过 showSizeChanger: false 关闭。如果 size 属性值为 small，则删除 size 属性。

4K3 0

React组件库封装初探--Modal

mask层的功能有所影响（因为warp层不全屏，如果mask设置不显示，会导致用户可以操作到底下主内容），可考虑mask的显隐通过visibility: hidden控制. ---- 基本功能逻辑实现...,document.querySelector('body')) : null ) } 组件采用函数无状态编程，Modal的显隐由外部控制，内部不控制；组件的挂载使用ReactDOM.createPortal...method()是Modal的方法即先给组件Modal增加对应方法，返回一个对象；通过在method(props)方法中将其方法参数作为组件Modal的props传入，并render（Modal）...content作为内容的传递，所以需要适配下；所以这里考虑使用一个高阶组件HocModal对传给Modal的props进行部分剔除和默认值修改 const HOCModal = (Component)...其他优化显隐的动画过渡；组件的保留，这里只实现了关闭即摧毁；优化为可选择不摧毁只是隐藏；支持异步加载关闭 “积跬步、行千里”—— 持续更新中~，喜欢的话留下个赞和关注哦！

5K1 0

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。它们只能用于平板电脑和台式机。在手机上，使用 modal drawers 代替。 ?...保持文本标签简短，但是长度实在太长时就截断 ? 不要换行不要缩小目的地icon（可选） Icon 可以对标签作为目的地的进行补充。使用时，应始终放置在文本之前。...Permanently visible standard drawers 允许在不相关的目的地之间快速旋转。此时需要一个 menu icon 进行控制，因为这种 drawers 不能被用户关闭。...比 top app bar 更低的高度 ---- Modal drawer 用法 Modal navigation drawers 会通过遮罩阻止用户与 app 内容的其余部分进行交互。

3.8K4 0

可重用性的6个级别

当我们重用该组件（而不是直接使用代码）时，它给我们带来了两个好处：将来进行更改要容易得多，因为我们只需要在一个地方做我们不必记住将代码复制到的数十个（或数百个）地方这是最基本的，也是最经常谈论的可重用性形式...但是，我们没有为每个版本创建全新的组件，而是使用道具在不同类型之间进行切换。添加这些道具通常不会给组件增加太多，但可以为我们提供更多使用该组件的灵活性。...您需要预见将来的需求，并通过放置这些道具将它们构建到组件中。但是，如果您使组件具有适应性，则无需更改组件即可使用从未想到的用例。我们通过使用插槽将标记的一部分从父代传递到组件来实现。...例如，我们可以使用插槽代替text在Button组件中使用道具default： <!...当您遵循食谱时，要做的工作要多一些，但是您可以完全掌控自己的制作方式。您可以随时进行调整，也可以完全放弃该食谱。我们使用作用域插槽来为我们的组件增加更大的灵活性。

1.1K2 0

开发一个简单的 Vue 弹窗组件

定义完 HTML 结构，还得定义组件的 props 属性，用来接收父组件的传参，以方便在父组件通过属性来控制弹窗。...$emit('submit') }, } } 从上述代码可知，组件只有两个 prop 属性，分别是 show（控制弹窗展示与关闭）和 title（弹窗标题）。...假设这个组件的文件名为 Modal.vue，我们在父组件里这样调用（假设父组件和弹窗组件在同一文件夹下）。...一个弹窗组件的拖拽一般通过三个事件来控制，分别是 mousedown、mousemove、mouseup。...mousedown、mousemove、mouseup，用来控制弹窗移动（点击弹窗头部进行拖拽）。

2.4K2 0

React后台管理前端系统(基于开源框架开发)起步式

因为我想跳出舒适区.接受更大的挑战,目前和vue并驾齐驱的React项目也很流程,很多公司也在使用.于是乎,技术栈就是用React了。...二个项目大同小异, 使用的技术栈react，ant-design，dva，Mock 基于 Antd UI 设计语言虽然我对dva和ant-design 了解不深,但我还是准备挑战一下.不入虎穴焉得虎子...在数据不显示的问题上短暂停留下,我开始探索ant-design-pro 这里我来说一下，当一个菜鸟接手一个新项目时遇到的迷茫和问题。...每个页面或组件都有可能是两个或更多个组件,组合而来的,而组件的参数也是错综复杂,组件的表现,事件都是有这些参数控制的.除了简单理解这些参数,还需要理解这些组件是怎么组合起来的....dispatch } = this.props; dispatch({ type: 'rule/fetch', }); } 在React组件的componentDidMount生命周期时

1.7K2 0

React：像message.success()一样实现Message通用容器及Message组件

但我们是不希望在各个页面都必须引入一个容器的，也不希望还必须做专门的组件挂载，这样的组件能用，但不是很能用。...("source-modal-contain"); //通过ReactDOM将容器挂载在真实dom上 ReactDOM.render(, ele);...在node节点外层包一层组件，我们控制这层组件实现动画这里其实我遇见了一个问题：由于hook函数中的useState是异步操作，而且不像setState一样提供了回调，那么当我们进行多次类似message.success...我的原本思路是调用子组件中的控制方法来进行隐藏操作，大晚上写着写着特么的就写歪了 ModalContainer class ModalContainer extends React.Component...这个组件还有很多不足的地方，从点击回调，到主动关闭手动关闭，还有很多地方可以优化

1.2K2 0

这可能是你需要的React实战技巧_2023-03-15

modal 关闭后会触发销毁 * 目前这里是 setState({visible: false}) 之后就立马触发销毁的 * 如果想 antd 那样还有消失过渡效果（transition...react 中，组件的渲染又可能是异步的，所以不建议直接使用 render 返回的实例，应该用下面方式 ReactDOM.render( )}使用 react 组件ReactDOM.createPortal 建立传送门通过 props 控制interface IModalProps...antd 的一样，既能通过 Modal.show() 方式使用，也是通过方式使用，这里就将上面两个例子进行合并const show = function (props: Omit<IModalProps...this.container.removeChild(this.el) } get visible() { /** * props 优先级比 state 高 * 保证如果外部在控制弹窗状态

7514 0

这可能是你需要的React实战技巧

7711 0

Vue改变数组值，页面视图为何不刷新？

/orderModal.vue' // 使用 <order-modal :showPop="showPop" // 控制组件的显示关闭 :orderData="orderData"...== undefined){ // 方法 } this.showPop = e // 关闭弹窗 e 为子组件传递过来的值 }, 子组件 <Modal v-model...="currentValue" // 子组件中接受父组件的 isShowAdd @on-cancel="cancel"> // Modal 的关闭事件 <Form...这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中， Vue 刷新队列并执行实际 (已去重的) 工作。...$nextTick() 4.2 数组改变视图不更新通过以下数组方法可以让vue监测数组改动 push() pop() shift() unshift() splice() sort()

1.6K2 0

《精通reactvue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件

模态框(Modal)组件一般会有如下需求点: 能控制Modal主体的样式提供Modal完全关闭后的回调能控制取消按钮文字和样式能控制确认按钮文字和样式控制modal展示的位置控制是否显示右上角的关闭按钮...可以配置自定义关闭图标配置关闭时是否销毁Modal里的子元素自定义模态框底部内容控制是否支持键盘esc关闭控制是否展示遮罩控制点击蒙层是否允许关闭自定义遮罩样式自定义标题控制对话框是否可见...，我们很容易控制一个modal组件具体显示那些元素，以及那些元素是可关闭modal的，具体案例如下： 1....2.7 实现键盘按键ESC时关闭模态框(Modal) 为了更好的用户体检，笔者的Modal组件支持键盘事件，我们都知道键盘的ESC对应的事件码为27，那么我们就能根据这个原理来实现键盘按键ESC时关闭模态框..., 一个健壮的的Modal组件就完成了.Modal组件算是组件库中中等复杂的组件，如果不懂的可以在评论区提问,笔者看到后会第一时间解答. 2.5 使用Modal组件我们可以通过如下方式使用它: <Modal

2.6K1 1

Bootstrap 模态框（Modal）插件的基本应用

模态框（Modal）通俗的说就是在父窗体上弹出的一个子窗体。通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。...一、用法：切换模态框（Modal）插件的隐藏内容：通过 data 属性：在控制器元素（比如按钮或者链接）上添加属性 data-toggle="modal"，同时设置 data-target="#identifier...可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。不能在同一时间加载多个模块，但可以在页面上创建多个在不同时间进行加载。...在模态框中需要注意两点：第一是 .modal，用来把的内容识别为模态框。第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。...2、keyboard 属性有 boolean，默认值：true ， data-keyboard 是当按下 esc 键时关闭模态框，设置为 false 时则按键无效。

4.3K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Ant Design 4.0 发布，来看看如何升级？

Ant-design Modal实现可以拖动的效果

如何优雅地解决多个 React、Vue 应用之间的状态共享

微前端x重构实践落地总结

Ant Disign 4.0 升级实践扑街指南 (一)

写给 vue2.0 开发者的 vue3.0 教程

优秀组件设计的关键：自私原则

Ant Design 4.0 正式版来了！

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

React组件库封装初探--Modal

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

可重用性的6个级别

开发一个简单的 Vue 弹窗组件

React后台管理前端系统(基于开源框架开发)起步式

React：像message.success()一样实现Message通用容器及Message组件

这可能是你需要的React实战技巧_2023-03-15

这可能是你需要的React实战技巧

Vue改变数组值，页面视图为何不刷新？

《精通reactvue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件

Bootstrap 模态框（Modal）插件的基本应用

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐