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

最新推荐文章于 2023-07-21 19:00:17 发布

原创最新推荐文章于 2023-07-21 19:00:17 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5 #vue

antd 同时被 3 个专栏收录

1 篇文章

订阅专栏

modal

1 篇文章

订阅专栏

a-modal

1 篇文章

订阅专栏

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

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

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

322

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

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

热门推荐

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万+

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

cat_want_fly的博客

08-10

6809

基于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"> ...

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..

antD+Vue后台管理项目总结

whonow33的博客

08-05

1559

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

基于springboot，ant-design-vue-pro的简易后台管理系统.zip

02-24

标题中的“基于SpringBoot，ant-design-vue-pro的简易后台管理系统”揭示了这个项目的核心技术栈，主要包括两个部分：SpringBoot后端框架和ant-design-vue-pro前端UI库。接下来，我们将深入探讨这两个关键技术以及...

使用vue-cli4手把手搭建一个完整的vue(vue+vuex+vue-router+scss+es6+antD+axios)项目

山野里的小菊花

07-24

1714

安装依赖全局安装vue-cli cnpminstallvue-cli-g 查看是否安装成功键入vue --version，出现以下版本号，则代表成功如果使用poweshellr提示无法加载文件 D:\nvm\nodejs\vue.ps1，因为在此系统上禁止运行脚本，请点击我查看解决办法创建项目 vuecreatevue-test//vue-test为项目名称，不支持驼峰 ? Please pick a preset: default (babel, eslint)...

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

qq_43148907的博客

11-03

5837

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

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

qihangVIP4的博客

12-09

1万+

a-modal对话框

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

花椒和蕊的博客

09-18

2609

原先有自带的底部取消和确认按钮，我设置了 :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

5756

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

Vue之使用a-model隐藏按钮

09-24

3480

<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

1840

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

Vue 设置modal的按钮只保留取消

yu1xue1fei的博客

12-25

2050

<template> <a-modal :title="title" :width="modalWidth" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" cancelText="关闭" :closable="closable" :keyboard="keyboard" :maskClosable="maskCl

antd中modal模态框隐藏下面不需要的按钮

Aom_yt的博客

07-21

7533

同样也是在a-modal上添加属性。在a-modal上加属性。

antd vue实现一个对话框两个按钮代码

09-02

在 antd vue 中实现一个对话框需要使用 Modal 组件，并且结合 Button 组件来实现两个按钮。代码示例： ```vue 显示对话框 <Modal v-model="visible" title="对话框标题" @ok="handleOk" @cancel=...