Antd单独隐藏Modal对话框的默认ok或cancel按钮

最新推荐文章于 2024-05-23 10:46:47 发布
最新推荐文章于 2024-05-23 10:46:47 发布
阅读量1.5w 收藏 28
点赞数 13
分类专栏： # Ant Design Vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hoaxxcj/article/details/115665795
版权

有时候我们需要单独隐藏Modal对话框的默认确定或取消按钮，设置:footer="null"会把两个按钮都隐藏。

Antd有提供两个参数用于单独修改确定、取消按钮：对于确定按钮，设置:ok-button-props="{ style: { display: 'none' } }"；对于取消按钮，设置:cancel-button-props="{ style: { display: 'none' } }"。这样就能快速隐藏对应按钮了。

hoaxxcj
关注
  • 13
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
01-19
本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解，...
antd-modal-dragable:在蚂蚁金服的antd库的modal组件上，新增可拖动功能
04-28
antd-modal-dragable 在蚂蚁金服的antd库的modal组件上，新增可拖动功能，完全复用antd-modal的全部api，支持同时打开多个窗口 新增以下三个api 1.dragable 类型boolean,是否可拖动，默认true,开启此项后，首次位置...
antd modal对话框去掉默认按钮
m0_56358827的博客
10-15 1114
antd modal对话框去掉默认按钮。
重复点击按钮
维馨梦之恋的博客
08-26 1456
重复点击按钮会导致重复提交表单，从而产生重复的数据。我们可以有多种方式解决，比如在数据库添加唯一索引。在这里，提供另一种方式，在前端控制用户重复点击。 前端用的是react + antd，因此案例代码与react相关，但思想是一致的。 提供公共组件： 定义了state: buttonDisabled, updateButtonDisable function import React from 'react'; import { Button } from 'antd'; import PropT
Modal.method() 不显示头部的问题
最新发布
正一品程序员的博客
05-23 365
Modal.method() 不显示头部的问题。
ant-design-vue okButtonProps.props.disabled 更新状态
lacie的博客
07-19 2440
okButtonProps.props.disabled
antd隐藏弹框确认按钮＜a-modal/＞
ffl886的博客
02-09 3363
antd隐藏弹框确认按钮<a-modal/>
antd中modal模态框隐藏下面不需要的按钮
Aom_yt的博客
07-21 5704
同样也是在a-modal上添加属性。在a-modal上加属性。
Vue学习笔记（十九）——组件props信息的修改
讨厌走开啦
07-09 5848
组件props信息的修改
ant design vue a-modal实现弹窗拖拽功能
weixin_44161385的博客
06-01 3913
vue ant-design中a-modal实现拖拽功能
antd中table展开行默认展示,且不需要前边的加号操作
01-22
前边不显示+，并且详细信息默认展开 在table中配置 (item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开所有...
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 ...
【antdv】confirm确认对话框的样式如何修改
Owen的博客
05-08 2532
在项目中，遇到一个问题，confirm确认框的按钮样式，在 里设置，完全不起作用。最后发现文档里，提供了专门的属性，只是写的不够清晰。
十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
*
12-02 5788
一、Antd(Ant Design)的使用：引入全部Css样式 1.1 antd官网： https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1、在项目根目录安装antd【每个项目都安装一次】： npm install antd --save / yarn add antd / cnpm install...
antDesignPro6：供应链系统项目-实战问题&解决汇总
qq_38969618的博客
04-23 1780
AntDesign组件库的相关使用
Ant Design ProForm 高级表单 去掉重置和提交按钮和搜索框
weixin_39540879的博客
07-07 3882
Ant Design ProForm 高级表单 去掉重置和提交按钮和搜索框
控制arco组件库中menu组件的二三级菜单的显隐（react类组件写法）
weixin_66232813的博客
05-27 617
以下数据的label以‘三级’开头的对象所在的数组，则为三级菜单数组，show是一个控制这一个菜单是否要展示的变量，如果show=true，表示这个菜单能展示。3.在判断的时候，要把所有的情况都考虑到，如果发现控制的条件过多，则可以换一种思路想，找到其的对立面，或者找到只需要满足一个条件，菜单就会出现，那么就控制这个条件能满足即可，其他的情况只要能满足最容易满足的一个，就都能满足菜单显示的条件。（2）renderSubMenuPop（）这个方法用于显示一级菜单下的二级和三级菜单。
Ant-Design源码分析——Popconfirm
qq_46025739的博客
11-10 1938
2021SC@SDUSC 首先是导入相应的模块 import * as React from 'react'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import KeyCode f
使用react hooks实现类似Antd的对话框Modal组件。只需要实现基本功能，不需要像Antd那样功能完善 对话框组件有标题、内容区和底部，并且底部有两个按钮ok和cancel Modal组件要求支持title(标题)，visible(对话框是否可见) onOk(点击按钮的回调函数)和onCancel(点击取消按钮的回调函数)属性Prop
05-25
好的，这里是使用react hooks实现类似Antd的对话框Modal组件的示例代码： ```jsx import React, { useState } from "react"; import ReactDOM from "react-dom"; const Modal = ({ title, visible, onOk, onCancel, children }) => { const [isModalVisible, setIsModalVisible] = useState(visible); const handleOk = () => { setIsModalVisible(false); onOk && onOk(); }; const handleCancel = () => { setIsModalVisible(false); onCancel && onCancel(); }; return isModalVisible ? ( <div className="modal-wrapper"> <div className="modal"> <div className="modal-header"> <h3 className="modal-title">{title}</h3> </div> <div className="modal-content">{children}</div> <div className="modal-footer"> <button className="modal-btn modal-btn-ok" onClick={handleOk}> OK </button> <button className="modal-btn modal-btn-cancel" onClick={handleCancel}> Cancel </button> </div> </div> </div> ) : null; }; const App = () => { const [visible, setVisible] = useState(false); const showModal = () => { setVisible(true); }; const handleOk = () => { console.log("OK button clicked"); }; const handleCancel = () => { console.log("Cancel button clicked"); }; return ( <div> <button onClick={showModal}>Show Modal</button> <Modal title="Modal Title" visible={visible} onOk={handleOk} onCancel={handleCancel} > <p>Modal Content</p> </Modal> </div> ); }; ReactDOM.render(<App />, document.getElementById("root")); ``` 这个示例代码中，我们首先定义了一个`Modal`组件，它包含了标题、内容区和底部按钮。在组件内部，我们使用`useState`来管理对话框的可见状态，并且定义了`handleOk`和`handleCancel`函数来处理点击ok和cancel按钮的事件。最后，我们在`return`语句中根据对话框的可见状态来渲染对话框。 在`App`组件中，我们使用`useState`来管理对话框的可见状态，并且定义了`showModal`、`handleOk`和`handleCancel`函数来处理对话框的显示和按钮的点击事件。最后，我们在`return`语句中渲染一个按钮和一个对话框。 这个示例代码中，我们实现了一个简单的对话框Modal组件，它支持title、visible、onOk和onCancel属性Prop。如果你需要更多的功能，可以根据自己的需求进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值