如何在 vue bootstrap 中禁用 b-modal 的 modal-ok 插槽？答案

【问题标题】：How to disable modal-ok slot of b-modal in vue bootstrap?如何在 vue bootstrap 中禁用 b-modal 的 modal-ok 插槽？
【发布时间】：2020-09-08 01:39:14
【问题描述】：

我使用b-modal slots 中的modal-ok 插槽来渲染b-modal 的OK 按钮。我想有条件地禁用 OK 按钮。我尝试了 2 种方法，但都没有运气。欢迎就如何禁用使用插槽呈现的“确定”按钮提出任何建议。

禁用道具

 <div
    slot="modal-ok"
    :disabled="true"
    @click.stop="uploadFile(item.id)"
  >
    Upload
  </div>

b-modal 的 ok-disabled 属性

  <div
    slot="modal-ok"
    :ok-disabled="true"
    @click.stop="uploadFile(item.id)"
  >
    Upload
  </div>

【问题讨论】：

标签： vue.js nuxt.js bootstrap-vue

【解决方案1】：

model-ok 范围不能修改按钮本身，它只是改变按钮内容

您需要改用modal-footer 范围并在那里手动声明按钮。

【讨论】：

【解决方案2】：

使用<b-modal> 上的ok-disabled 属性，有条件地启用/禁用ok 按钮。

<b-modal :ok-disabled="true">
  <!-- Content -->
</b-modal>

有关更多信息，请查看文档的this 部分。

【讨论】：

我没有使用 b-modal 的默认确定按钮。我已经使用 modal-ok 插槽来呈现自定义 ok 按钮。这个答案与那个无关。
我认为它是。由于您使用的插槽仅控制ok 按钮的内容。所以这仍然会禁用按钮。我不太明白的是为什么你正在做你正在做的事情。至少根据您在问题中的代码，没有什么需要您使用插槽并且可以通过普通道具完成。

【解决方案3】：

如果你想摆脱按钮，只需添加隐藏页脚

<b-modal hide-footer>
  <!-- Content -->
</b-modal>

【讨论】：