naiveui 实现点击时不触发面板切换（可用）

需求：第二个tab是一个跳转链接

效果图

跳转后回退

缺陷

根据文档尝试解决（无法解决）

不能混用

naiveui 实现点击时不触发页签切换

在Naive UI 中，如果你想要实现点击时不触发页签切换的效果，你可以通过自定义事件处理来实现。以下是一个简单的例子，展示了如何在点击页签标题时不触发切换逻辑：

  <div class="form w-[468px] absolute top-1/2 left-1/2 -translate-y-1/2  flex justify-center">
      <n-tabs
          :value="tabActiveName"
          size="large"
          animated
          class="mx-[40px] mt-[30px]"
          :bar-width="30"
          justify-content="space-around"
          type="line"
          @update:value="handleTabChange"
      >
        <n-tab-pane name="PASSWORD" tab="密码登录" class="mt-[20px]">
          <n-form
              ref="formRef" :model="model"
              :rules="rules"
              class="mx-[20px]"
              :show-label="false"
              @keyup.enter="submitLogin"
              >
            .......
          </n-form>
          <div class="flex justify-center items-center">
            <n-button type="primary" class="submit_btn mb-[30px] mt-[30px]" @click="submitLogin" :loading="loading">
              登录
            </n-button>
          </div>
        </n-tab-pane>

        <n-tab-pane name="OTHER" tab="第三方登录">
          <template #tab>
            <n-image :src="loginLogo" class="w-[32px] h-[32px] mr-2"></n-image>
            第三方登录
          </template>
        </n-tab-pane>
      </n-tabs>
    </div>

<script setup lang="ts">
 
  const tabActiveName = ref("PASSWORD")
  
  function handleTabChange(value) {
    if (value === "OTHER") {
      let callbackUrl = location.href
      location.href = `xxxxxxxx`
      tabActiveName.value = "PASSWORD"
    }
  }


  const formRef = ref(null)
  function submitLogin(e) {
    e.preventDefault()
    formRef.value?.validate((errors) => {
      if (!errors) {
       }
    })
  }

</script>

关键点：

1. value string | number undefined 受控模式下的值
2. location.href = ‘https://www.naiveui.com’; 是异步的，所以tabActiveName.value = ‘tab1’ 还是会被执行到！