在 VueJS / NuxtJS 中单击外部时防止 Buefy / Bulma 模态关闭

Question

Buefy Modal 的默认行为是在外部单击（或按 ESC）时关闭。然而，这种行为在处理长输入时可能是有害的，因为错误的点击可能会使用户失去所有工作。

如何防止 Buefy Modal 在点击外部时关闭（在 VueJS / NustJS 中）？

在下面的示例中，我创建了一个包含模态的自定义组件（卡片模态：https://buefy.org/documentation/modal）。然后在父页面中，我使用以下函数打开模态：

methods: {
    createNew(type) {
      this.$store.commit('SET_MODAL_TYPE', type)
      this.$buefy.modal.open({
        parent: this,
        component: createNewModal,
        hasModalCard: true,
        customClass: 'custom-class custom-class-2',
        trapFocus: true,
      })
    },
  },

更新：

根据接受的答案，解决方案非常简单，只需在调用模态时添加 canCancel: ['x']：

  methods: {
    createNew(type) {
      this.$store.commit('SET_MODAL_TYPE', type)
      this.$buefy.modal.open({
        parent: this,
        component: createNewModal,
        hasModalCard: true,
        trapFocus: true,
        canCancel: ['x'],
      })
    },
  },

Answer 1

只需使用 can-cancel 属性来定义什么可以导致模态关闭：can-cancel="['escape', 'x', 'outside']"

Docs

在 VueJS / NuxtJS 中单击外部时防止 Buefy / Bulma 模态关闭

Prevent Buefy / Bulma modal from closing when clicking outside in VueJS / NuxtJS

modal-dialog

vue.js

bulma

buefy

nuxtjs