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

【问题标题】：Prevent Buefy / Bulma modal from closing when clicking outside in VueJS / NuxtJS在 VueJS / NuxtJS 中单击外部时防止 Buefy / Bulma 模态关闭
【发布时间】：2020-11-18 16:24:30
【问题描述】：

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'],
      })
    },
  },

【问题讨论】：

标签： vue.js modal-dialog bulma buefy nuxtjs

【解决方案1】：

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

Docs

【讨论】：

呃，我错过了，谢谢！我早上试试，然后告诉你。 :)