vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮

最新推荐文章于 2024-08-19 23:43:06 发布

ZHANG.......

最新推荐文章于 2024-08-19 23:43:06 发布

阅读量5k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/zyf971020/article/details/127586645

博客介绍了在Vue中隐藏Modal对话框默认确定或取消按钮的方法。在template中，设置 :footer=\null\会隐藏两个按钮，使用Antd参数可单独隐藏，确定按钮用 :ok-button-props，取消按钮用 :cancel-button-props；使用this.$confirm({})方式也能隐藏。

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

有时候我们需要单独隐藏Modal对话框的默认确定或取消按钮，设置 :footer="null"会把两个按钮都隐藏。

Antd有提供两个参数用于单独修改确定、取消按钮；对于确定按钮，设置 :ok-button-props="{ style: { display: 'none' }}"；对于取消按钮，设置 :cancel-button-props="{ style: { display: 'none' }}"。这样就能快速隐藏对应按钮了。

那么以上都是在template中隐藏，但单我们使用this.$confirm({})方式按以下方式也可以隐藏各自按钮

this.$confirm({
  content: '当前运单已超载，无法进行线上支付。',
  cancelButtonProps: { style: { display: 'none' }}, // 隐藏取消按钮
  onOk: () => {
  }
})