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

Question

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

程序应该是：

如果进行了任何更改，用户按下选项卡并出现一个对话框。
如果用户点击'No'，我应该阻止标签更改并停止点击事件

这是我要存档的演示，应该很简单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”，这解释了您遇到的问题。例外情况是如果选项卡被禁用，在这种情况下它不会更改选项卡但会发出“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 属性以确定应将什么设置为活动。

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

Prevent tab change on PrimeVue TabView component

javascript

vue.js

primevue

vuejs3