antdvue点击按钮弹窗功能

最新推荐文章于 2025-08-29 14:56:43 发布

原创最新推荐文章于 2025-08-29 14:56:43 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

这篇博客介绍了如何在antdvue中利用a-modal组件实现按钮点击后弹出确认取消的弹窗功能。内容涉及到在表格操作中如删除、发布和取消发布的场景，通过设置visible状态和modaltitle，并编写判断方法，确保弹窗能够正确显示和关闭。

点击按钮实现在表格上方出现弹窗，询问确认取消功能

使用了antd的一个弹窗组件a-modal

     <a-modal
      :title="modalTitle"
      :visible="visibleDel"
      :maskClosable="true"
      :width="480"
      :footer="null"
      @cancel="
        () => {
          visibleDel = false
        }
      "
    >
      <div class="form-main">
        <div class="content">
          <div class="content-sure">{{modalContent}}</div>
        </div>
        <div class="footer">
          <a-button type="primary" class="footer-button-cancle" @click.stop.prevent="visibleDel = false">
            取消
          </a-button>
          <a-button
            type="primary"
            class="footer-button-sure"
            :style="{ margin: '0 30px' }"
            @click.stop.prevent="onModalClick()"
          >
            <span v-if="modalType === 1">确认删除</span>
            <span v-else>确认</span>
          </a-button>
        </div>
      </div>
    </a-modal>

return中添加visible：false、visibleDel: false,以及modaltitle

因为在我的表格中有删除、发布和取消发布三个按钮需要弹窗，所以写了个判断方法

handleDelete(record) {
      this.modalType = 1
      this.modalTitle = "删除内容"
      this.modalContent = "是否要删除所选内容，删除后将不可恢复？"
      this.delId = record.id
      this.visibleDel = true
    },
    onModalClick() {
       switch (this.modalType) {
        case 1:
          this.onDelete();
          break;
        case 2:
          this.issue();
          break;
        case 3:
          this.cancelIssue();
          break;
      }
    },
    handleGo(record) {
      this.modalTitle = "发布"
      if (record.status=='草稿') {
        this.modalContent = "是否要发布所选内容？"
        this.modalType = 2
      } else {
        this.modalType = 3
        this.modalContent = "是否要取消发布所选内容，取消后内容将在OneITLab终端不可见？"
      }
      this.isIssueId = record.id
      this.visibleDel = true
      
    },

同时还需要在你需要调用的方法中加上this.visibleDel = false

这样点击确认就会关闭弹窗了