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

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>

这里的cancelText="关闭"是控制modal自带的按钮名字。
这个是只留下了关闭按钮,也可以换其他的,只留下确认按钮。
在这里插入图片描述
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即可,可以看到这个是三个按钮的。
在这里插入图片描述

Ant Design Vue (AntdVue) 的 `a-modal` 是一个轻量级的弹窗组件,常用于创建模态框、对话框通知。它提供了一些基本的功能,如显示和关闭模态内容,配置标题、大小、位置等。以下是 `a-modal` 主要的 API 属性和方法: 1. **props** (属性): - `visible`: 控制模态是否可见,默认值为 `false`。布尔型,可通过 `this.$refs.modal.show()` 者通过绑定的事件改变。 - `title`: 模态窗口的标题,字符串类型。 - `width` 和 `height`: 模态窗口的尺寸,可以设置为固定像素值百分比。 - `center` `fullscreen`: 是否居中显示全屏模式。 - `mask`: 是否显示遮罩层,默认 true。 - `maskClosable`: 是否允许点击遮罩层关闭模态,默认 true。 2. **methods** (方法): - `open()`: 显示模态。 - `close()`: 关闭模态。 - `onOk(event)`: 确定按钮自定义确认操作触发的回调函数,event 参数是点击事件。 - `onCancel(event)`: 取消按钮自定义取消操作触发的回调函数,event 参数同上。 3. **events** (事件): - `onVisibleChange(visible)`: 当模态的可见状态变化时触发,visible 是新的可见状态。 - `onAfterClose()`: 模态关闭后触发。 要使用 `a-modal`,通常会在模板中引用组件,并通过 props 和 methods 进行配置。例如: ```html <template> <a-modal v-model="modalVisible" :title="modalTitle"> <div slot="content">这里是模态的内容</div> <a-button type="primary" @click="handleOk">确定</a-button> <a-button type="ghost" @click="handleCancel">取消</a-button> </a-modal> </template> <script> export default { data() { return { modalVisible: false, modalTitle: '这是一个模态' }; }, methods: { handleOk() { this.$refs.modal.close(); // 关闭模态并调用回调 }, handleClose() { this.modalVisible = false; } } }; </script> ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值