antd+vue modal对话框去掉全部按钮

最新推荐文章于 2025-04-11 19:00:00 发布

原创最新推荐文章于 2025-04-11 19:00:00 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5 #vue

antd 同时被 3 个专栏收录

1 篇文章

订阅专栏

modal

1 篇文章

订阅专栏

a-modal

1 篇文章

订阅专栏

本文介绍如何在使用 Ant Design Vue 的模态框组件时，通过设置 footer 属性为空来移除默认的确认和取消按钮，并提供自定义样式的可能性。

antd+vue modal对话框去掉全部按钮

<a-modal
    class="detail-wrapper"
    :title="title"
    width="90%"
    @cancel="close"
    v-model="visible"
    :keyboard="false"
    :maskClosable="false"
    footer=""
  ></a-modal>

设置footer为空，去掉确定、取消默认按钮
footer=""
也可以自定义样式，我只需要去掉。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LuoFeng_next

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3 + antd + typeScript 封装一个高仿的ModalForm表单

echo_Ae的博客

07-18

419

阿里的antd组件说实话真的非常完善了，可是vue版的寥寥无几，vue3的更少了，今天有空就封装一个高仿的ModalForm。

vue3+antd 实现点击按钮弹出对话框

源滚滚编程

07-07

1890

【代码】vue3+antd 实现点击按钮弹出对话框。

参与评论您还未登录，请先登录后发表或查看评论

Ant Design Vue模态框modal去除确认或添加按钮

热门推荐

DOM曼珠沙华的博客

09-14

3万+

1.去除确认按钮 <template> <a-modal :title="title" :width="950" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <template slot="footer"> <a

Antd 的vue模态框modal去除确认或添加按钮（自定义按钮）

Schaffer的博客

11-05

1万+

uni-app的showModal弹框只显示确认按钮，不显示取消按钮

qq_59175937的博客

01-27

1万+

遇到这个问题，问的度娘，搜到了友友发的贴，解决官网： uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console

基于Antd的模态框modal不显示确认和取消按钮

cat_want_fly的博客

08-10

7120

基于Antd的模态框modal不显示确认和取消按钮

ant design vue版本modal设置一个按钮

xc_buxiangzhangda的博客

08-15

1万+

//设置一个按钮或者单独样式 <a-modal title="已关联ECU" width="60%" :visible="ecuvisible" :destroyOnClose="true" :keyboard="false" :maskClosable="false" @cancel="handleCancel" > <template slot="footer"> ...

【antd + vue】Modal 对话框：修改弹窗标题样式、Modal.confirm自定义使用

m0_65041204的博客

04-11

1361

Modal 直接在对应css文件中修改样式不生效，自定义样式

【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）弹出确认框

Java&Develop的博客

02-25

2505

【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）

antD+Vue后台管理项目总结

whonow33的博客

08-05

1593

Ant Design Vue 后台管理项目总结父组件调用子组件（Modal为例）接口调用插槽的使用ES6中规范写法ES6箭头函数修改数据之后的refresh数据重置时间格式（moment文档）在一个界面打开另一个界面（路由）上传图片的功能上传图片问题-展示默认图片图片上传问题--不同id对应不同imagegithub 提交github提交规范github命令行提交代码github创建分支查看当前所有命令js实体文本转纯文本方法antD表单绑定和校验规则正则表达式wangEditor富文本编辑器富文本编辑器

Modal中的确认和取消按钮

weixin_47763287的博客

11-05

1万+

1. 取消Modal中的确认和取消按钮。这里通过在<Modal>标签中添加footer属性设置。 <Modal title="删除" visible={visible} confirmLoading={confirmLoading} onCancel={this.handleCancel} footer={ [] // 设置footer为空，去掉取消确定默认按钮 } > </Modal> 2. 自定义Modal的按钮。 <Moda..

modal取消默认按钮，自己定义按钮

qq_43148907的博客

11-03

5902

<template> <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭" wra...

ant designpro隐藏modalfrom的确认button

Joyduke的博客

12-27

1083

隐藏确认按钮

a-modal关闭和重写确定、取消

qihangVIP4的博客

12-09

1万+

a-modal对话框

a-model点击空白处不关闭弹窗，不要自带的底部

花椒和蕊的博客

09-18

2691

原先有自带的底部取消和确认按钮，我设置了 :footer=“null” ，改为自定义然后没有取消按钮后我把取消的事件给取消了再点击空白处或者点击右上角的关闭按钮都没有反应。看代码没看出问题，重新翻文档才发现 <a-modal title="xx清单" :width="800" centered :visible="visible" bodyStyle="padding: 0;" :footer="null" :zIndex="zI

Vue中this.$confirm只显示一个按钮，且不能点击空白处关闭

weixin_45336090的博客

11-11

5946

this.$confirm('弹窗文本内容', '提示', { confirmButtonText: '确定', //确认按钮的文字 showCancelButton: false, //是否显示取消按钮 showClose: false, //是否显示关闭按钮 closeOnClickModal: false, //是否可以通过点击空白处关闭弹窗 type: 'info' });

Vue之使用a-model隐藏按钮

09-24

3521

<a-modal v-model="visible" title="Title" centered width="1100px"> <template slot="footer"> <a-button key="back" v-show="false"> Return </a-button> <a-button key="submit" v-show="false"...

Vue自定义弹窗只显示取消按钮

sinat_33940108的博客

09-07

1865

项目弹窗原始状态：这里弹窗中的确定和取消按钮功能一致，都是关闭弹窗。故自定义只显示取消按钮。这里的弹窗为ant vue源码执行自Modal.js 弹窗代码： handleCancel和handleOk事件都为this.close()，功能相同，只需要显示一个。解决办法：这里可以使用slot=“footer”自定义按钮 <div slot="footer"> <a-button @click="handleCancel">取消</a-button>

antdVue a-modal 对话框卡顿