Ant Design Vue 的Modal 按钮放置到对话框顶部

最新推荐文章于 2025-08-02 14:19:41 发布

一秒时光之恋笑

最新推荐文章于 2025-08-02 14:19:41 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ant-design-vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_35269556/article/details/124987211

ant-design-vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在前端开发中使用自定义模态框并去除默认footer，同时展示如何设置模态框内的按钮样式及实现自定义工作流按钮的功能。通过具体的代码示例，详细解释了如何集成这些特性到模态框组件中。

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

设置footer为空 footer=""
自定义确定、取消等按钮的样式。代码如下：

<j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    footer="">
    <template>
      <div style="position: absolute;left: 70%;top:13px">
        <!-- 审批流按钮 1-->
        <work-flow-btn :row='workflow.row' :processCode='workflow.code' @ok="submitCallback"></work-flow-btn>
        <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;margin-right: 8px">保存</a-button>
        <a-button @click="handleCancel">
          关闭
        </a-button>
      </div>

    </template>
    <apply-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"/>
  </j-modal>