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

最新推荐文章于 2024-08-16 10:20:20 发布
最新推荐文章于 2024-08-16 10:20:20 发布
阅读量1.7w 收藏 28
点赞数 13
分类专栏： # Ant Design Vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hoaxxcj/article/details/115665795
版权
在Ant Design中，当需要独立隐藏Modal组件的确认或取消按钮时，可以分别通过设置`ok-button-props`和`cancel-button-props`来实现。例如，将确定按钮样式设为`display: none`，取消按钮同样如此，即可达到隐藏单个按钮的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

antd-Modal弹窗
读心悦
02-25 9144
人发图给你发个
antd隐藏弹框确认按钮＜a-modal/＞
ffl886的博客
02-09 3802
antd隐藏弹框确认按钮<a-modal/>
antd中modal模态框隐藏下面不需要的按钮
Aom_yt的博客
07-21 7396
同样也是在a-modal上添加属性。在a-modal上加属性。
ant design vue 的ele-modal不显示底部取消确认按钮
zheshihuahua的博客
03-26 1667
【代码】ant design vue 的ele-modal不显示底部取消确认按钮。
vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮
wocwin的博客
10-09 9895
有时候我们需要单独隐藏Modal对话框的默认确定或取消按钮，设置:footer="null"会把两个按钮都隐藏。 Antd有提供两个参数用于单独修改确定、取消按钮：对于确定按钮，设置:ok-button-props="{ style: { display: ‘none’ } }"；对于取消按钮，设置:cancel-button-props="{ style: { display: ‘none’ } }"。这样就能快速隐藏对应按钮了。 那么以上都是在template中隐藏，但单我们使用this.$confir
如何让antd的Modal组件的确认和取消不显示（或自定义按钮）
热门推荐
qq_36742720的博客
07-02 5万+
使用Modal中的footer属性，如下： <Modal title="更改成员" visible={visible} confirmLoading={confirmLoading} onCancel={this.handleCancel} footer={ ...
如何使用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,开启此项后，首次位置...
使用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...
antd modal对话框去掉默认按钮
m0_56358827的博客
10-15 1281
antd modal对话框去掉默认按钮。
ant designpro隐藏modalfrom的确认button
Joyduke的博客
12-27 962
隐藏确认按钮
antd vue关闭模态对话框_antd-Modal对话框
weixin_39802969的博客
12-22 3885
onOk={this.handleOk} onCancel={this.handleCancel}> footer={false}title:用来设置模态框的标题visible：用来控制显示隐藏，一般操作都是将它的状态设置为false,然后通过按钮点击改变状态变成true，然后点击取消或者关闭按钮，或者确定按钮，将状态设置为false,隐藏此模态框onOk:底部的确定触发的方法onCan...
antd modal的onOk提交form表单
feifeichongtian的博客
08-17 4942
import React, { Component } from 'react' import { Modal, Form, Input, Button } from 'antd' import FormModal from './SharedForm' class SharedFormModal extends Component { state = { visible: true, } showModelHandler = (e) => { if (e) e.s.
Ant Design中Modal.warning Modal.success Modal.error Modal.info 如何隐藏确认按钮
最新发布
SailingCoder的博客
08-16 489
Ant Design中Modal.warning、Modal.success、Modal.error、Modal.info 如何隐藏确认按钮。以 Modal.warning 举例说明。通过将okButtonProps的style属性设置为{ display: ‘none’ }，我们成功地隐藏了Modal组件中的确认按钮。在Ant Design的Modal组件中，若要隐藏确认按钮，可以通过设置okButtonProps属性来实现。
十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
*
12-02 6016
一、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...
ant design vue a-modal实现弹窗拖拽功能
weixin_44161385的博客
06-01 4755
vue ant-design中a-modal实现拖拽功能
隐藏dialog右上角关闭按钮
03-27 818
设置 cancel:false 转载于:https://www.cnblogs.com/lwx521/p/8655751.html
实现一个比ant功能更丰富的Modal组件
小陈的博客
02-17 764
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值