代码之家 › 专栏 › 技术社区 › TinyTiger

如何防止PrimeVue v3 TabView中的选项卡更改?

primevue vue.js typescript javascript

0

TinyTiger · 技术社区 · 1 年前

我正在使用 PrimeVue V3 TabView 成分为API。

在每个选项卡中,我都有一个表单,我想触发表单验证之前切换标签。因此,我需要中断选项卡更改,做一些事情(表单验证),然后有条件地继续单击选项卡。

TabView文档显示3个事件: update:activeIndex , tab-change ,以及 tab-click 但据我所知,所有这些都是触发的之后换标签,而不是以前。

你知道怎么做吗?

我找到了一个 similar question 并基于旧的选项API回答,但我无法使其适用于Vue 3 Composition API。

这是一个 live reproduction on stackblitz .

<template>
  <TabView
    v-model:activeIndex="activeIndex"
    @tab-change="handleTabChange"
    @tab-click="handleTabClick"
  >
    <TabPanel header="Opening Hours"> Opening hours form goes here </TabPanel>
    <TabPanel header="Contacts"> Contacts form goes here </TabPanel>
  </TabView>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { TabViewChangeEvent, TabViewClickEvent } from 'primevue/tabview';

const activeIndex = ref();

const handleTabClick = async (event: TabViewClickEvent) => {
  console.log('handleTabClick', event);
  const nextTabIndex = event.index;
  const isValid = false; // Simulated form validation
  if (isValid) {
    // Form is valid, continue with the tab change
    console.log('form valid');
    activeIndex.value = nextTabIndex;
  } else {
    // Form is invalid, do nothing (don't change tabs)
    console.log('form invalid');
  }
};

const handleTabChange = async (event: TabViewChangeEvent) => {
  console.log('handleTabChange', event);
  const nextTabIndex = event.index;
  const isValid = false; // Simulated form validation
  if (isValid) {
    // Form is valid, continue with the tab change
    console.log('form valid');
    activeIndex.value = nextTabIndex;
  } else {
    // Form is invalid, do nothing (don't change tabs)
    console.log('form invalid');
  }
};
</script>

1 回复 | 直到 1 年前

1

M Atif Mehmood 1 年前

我只是让老的选项API答案对你来说可行

这是代码

<template>
  <TabView
    v-model:activeIndex="activeIndex"
    @tab-change="handleTabChange"
    @tab-click="handleTabClick"
  >
    <TabPanel header="Opening Hours"> Opening hours form goes here </TabPanel>
    <TabPanel header="Contacts"> Contacts form goes here </TabPanel>
  </TabView>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import type { TabViewChangeEvent, TabViewClickEvent } from 'primevue/tabview';

// Override the default onTabClick method of TabView
// This should ideally be in a global setup file, not in a component
TabView.methods.onTabClick = function (event, tab, i) {
  this.$emit('tab-click', {
    originalEvent: event,
    tabInfo: tab,
    index: i,
  });
};

// Ref to keep track of the active tab index
const activeIndex = ref();

// Handler for tab click events
const handleTabClick = async (event: TabViewClickEvent) => {
  console.log('handleTabClick', event);
  const nextTabIndex = event.index;

  // Simulated form validation
  // In a real scenario, this would be replaced with actual form validation logic
  const isValid = false; 

  if (isValid) {
    // If the form is valid, allow the tab change
    console.log('form valid');
    activeIndex.value = nextTabIndex;
  } else {
    // If the form is invalid, prevent the tab change
    console.log('form invalid');
    // No action needed here as we're not changing activeIndex
  }
};

// Handler for tab change events
const handleTabChange = async (event: TabViewChangeEvent) => {
  console.log('handleTabChange', event);
  
  // Prevent the default tab change behavior
  event.originalEvent.preventDefault();

  const nextTabIndex = event.index;

  // Simulated form validation
  // In a real scenario, this would be replaced with actual form validation logic
  const isValid = false; 

  if (isValid) {
    // If the form is valid, allow the tab change
    console.log('form valid');
    activeIndex.value = nextTabIndex;
  } else {
    // If the form is invalid, prevent the tab change
    console.log('form invalid');
    // No action needed here as we've already prevented the default behavior
  }
};
</script>