防止模态框在点击背景时关闭 [Vuejs]

Question

我正在使用< strong >vue-js-modal库，并按照文档中的步骤进行操作，但我需要实现这样一个功能：当 modal 打开时，用户不能在单击 modal 后面的背景时关闭 modal。

文档中写到可以使用属性< strong >clickToClose，但是当我在 modal 中使用时，出现了错误消息：

<modal name="image-modal" clickToClose="false"></modal>

错误信息：

Vue warn]: Invalid prop: type check failed for prop "clickToClose". Expected Boolean, got String.

这个问题的解决方案是什么？

- Mohd Ali

Answer 1

对于使用bootstrap-vue的用户： 请添加“no-close-on-backdrop”并将其设置为“true”。

<b-modal id="modal_id" :no-close-on-backdrop="true">

- Smartniggs

---

这个问题不是关于Bootstrap，而是关于Vue-js-modal。 - d512

Answer 2

clickToClose="false"将clickToClose属性设置为字符串"false"。

您需要使用v-bind来绑定到任意JavaScript表达式：

<modal name="image-modal" :clickToClose="false"></modal>

在上面的代码片段中，false 被视为 JavaScript 代码而不是字符串。

- Decade Moon

Answer 3

clickToClose中的kebabCase可能不起作用。这对我有用。

<modal name="image-modal" v-bind:click-to-close="false"></modal>

- Vivek Khurana

---

这就是实际答案。或者你可以使用简写：:click-to-close="false"。 - d512

Answer 4

在使用vue-js Modal()时，有一个名为backdrop的属性。你应该使用它。

:close-on-backdrop="false" :close-on-esc="false"

在你的模态标签中。

- M. Ahmad

---

你好。如果您适当地格式化代码并理想地放置完整的模态代码，答案将更好。 - Itération 122442