【问题标题】: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 种方法,但都没有运气。欢迎就如何禁用使用插槽呈现的“确定”按钮提出任何建议。

  1. 禁用道具

     <div
        slot="modal-ok"
        :disabled="true"
        @click.stop="uploadFile(item.id)"
      >
        Upload
      </div>
    
  2. 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】:

      使用&lt;b-modal&gt; 上的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>
      

      【讨论】:

        猜你喜欢
        • 2019-02-22
        • 2020-07-15
        • 2018-10-04
        • 2019-11-20
        • 2022-11-05
        • 2019-11-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多