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

左手的ㄟ右手 2022-12-06 15:21 896阅读 0赞

### 1.去除确认按钮 ###

<template>
      <a-modal
        :title="title"
        :width="950"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭">
    	
        <template slot="footer">
          <a-button @click="handleCancel">关闭</a-button>
        </template>
    	
      </a-modal>
    </template>

这个是只留下了关闭按钮，也可以换其他的，只留下确认按钮。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

### 2.增加其他按钮 ###

<template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleReject">驳回</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>

更换模态框内的template即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

可以看到这个是三个按钮的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221123/f41bfa4b47da4be9aefe9559830423ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20221123/50424bbd7eeb4cd193ec6c6cc32889bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，896人围观）

还没有评论，来说两句吧...

相关阅读

相关深入浅出bootstrap模态框modal.js

> 本篇博客参考https://v3.bootcss.com/javascript/\modals-examples 先上bootstrap官网瞅一眼: ![在这里插入图

￡神魔★判官ぃ/ 2023年05月21日 07:24/ 0 赞/ 20 阅读

相关 antd-design-vue modal模态框组件自定义footer脚部的按钮

项目中需求，模态框只保留一个确定按钮，去掉取消按钮。官方文档中只写了去掉全部的脚部按钮，:footer设置为null，这个补不满足需求，在多查找资料解决了此问题在s

喜欢ヅ旅行/ 2022年12月20日 06:05/ 0 赞/ 222 阅读

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

1.去除确认按钮 <template> <a-modal :title="title" :width="950"

左手的ㄟ右手/ 2022年12月06日 15:21/ 0 赞/ 897 阅读

相关 ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）

用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法父页面完全接管子页面（利于子页面复用）父页面代码

心已赠人/ 2022年11月03日 04:12/ 0 赞/ 293 阅读

相关为Bootstrap Modal（模态框）全局添加拖拽操作

在js中绑定方法 $(document).on("show.bs.modal", ".modal", function(){ $(this).dra

r囧r小猫/ 2022年07月17日 04:09/ 0 赞/ 187 阅读

相关 Bootstrap模态框(Modal)插件

Bootstrap模态框(Modal)插件 1.定义模态框(Modal)是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独源的内容，可以在不离开父窗体的情况

深碍√TFBOYSˉ_/ 2022年05月28日 01:59/ 0 赞/ 325 阅读

相关 bootstrap 模态框modal

1. 使用前提: 加载mode.js或bootstrap.js或压缩版的 bootstrap.min.js 2. 两种触发显示: 通过 data 属性：在控制器元素（

亦凉/ 2022年05月24日 10:17/ 0 赞/ 387 阅读

相关 Vue sweet-modal-vue 通用型的模态框

场景组件介绍 && 优势安装用法备注用

浅浅的花香味﹌/ 2022年05月17日 05:14/ 0 赞/ 194 阅读

相关 html添加按钮触发模态框

html添加按钮触发模态框   <div id="addModal" class="modal

水深无声/ 2022年04月25日 01:08/ 0 赞/ 403 阅读

相关 Bootstrap 模态框（Modal）插件

Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有

ゝ一纸荒年。/ 2022年03月21日 12:28/ 0 赞/ 419 阅读