如何通过单击选项卡本身以外的其他内容来切换VueJS Vuetify中的选项卡

<template>
  <v-tabs v-model="selectedTab" @click:outside="handleClickOutside">
    <v-tab v-for="tab in tabs" :key="tab.id">
      {{ tab.title }}
    </v-tab>
    <v-tab-item v-for="tab in tabs" :key="tab.id" :value="tab.id">
      {{ tab.content }}
    </v-tab-item>
  </v-tabs>
</template>

<script>
export default {
  data() {
    return {
      selectedTab: null,
      tabs: [
        { id: 1, title: 'Tab 1', content: 'Content 1' },
        { id: 2, title: 'Tab 2', content: 'Content 2' },
        { id: 3, title: 'Tab 3', content: 'Content 3' }
      ]
    };
  },
  methods: {
    handleClickOutside(event) {
      const tabElement = event.target.closest('.v-tabs__item');
      if (!tabElement) {
        // 切换选项卡
        // 这里可以根据点击的位置或其他条件来确定要切换到的选项卡
        // 例如，可以根据点击的坐标来判断是切换到前一个选项卡还是后一个选项卡
        // 更新selectedTab的值即可
      }
    }
  }
};
</script>