防止 PrimeVue TabView 组件上的选项卡更改

Question

我正在使用 PrimeVue (Vue 3) 中的 TabView 组件，如果用户进行任何更改，我想停止选项卡更改，问题是我不知道怎么做。我已经尝试过传递事件并使用 preventDefault 和 stopPropagation 但似乎它不起作用并且点击事件仍在发生。

程序应该是：

• 如果进行了任何更改，用户按下选项卡并出现一个对话框。

• 如果用户点击“否”，我应该阻止标签更改并停止点击事件

这是我要存档的演示，应该很简单https://codesandbox.io/s/aged-wave-yzl1k?file=/src/App.vue:0-1753

如果标志为真，我想显示一个确认对话框，并在用户关闭它时阻止标签更改。

我用于 TabView 的组件：https://primefaces.org/primevue/showcase/#/tabview

提前致谢，

Answer 1

从docs 看来，组件内部将首先切换选项卡，然后发出“选项卡单击”，这解释了您所看到的问题。例外情况是如果选项卡被禁用，在这种情况下它不会更改选项卡但会发出“tab-click”。

花了一点时间才弄明白，但有一种方法可以让您只需稍作调整即可获得所需的功能。它需要更改您的 main.js 以及您的 App.vue 文件。

// main.js

/*
 * Put this after you import TabView.
 * This will prevent automatic tab switching but still emits
 * the event to your application.
*/
TabView.methods.onTabClick = function(event, i) {
  this.$emit('tab-click', {
    originalEvent: event,
    index: i
  });
}

// App.vue

const onTabClick = (event) => {
  if (changes.value) {
    confirm.require({
      message:
        "Are you sure that you want to leave this tab? You'll lose your changes",
      icon: "fal fa-exclamation-triangle",
      acceptLabel: "Yes",
      rejectIcon: "No",
      accept: () => {
        alert("here we should allow tab change");
        activeIndex.value = event.index; // manually set activeIndex
      },
      reject: () => {
        alert("stop tab change");
      },
    });
  }
};

这些更改将 onTabClick 库方法修改为仅发出事件，而不自动切换。然后在您的应用程序中，您可以检查事件的index 属性以确定应设置为活动的内容。