Quasar q-tab切换前弹出确认对话框实现方案咨询

DevOps 小满

2026-7-11

解决Quasar Q-Tabs标签切换前拦截确认的问题

核心思路是手动接管标签切换逻辑，阻止默认切换行为，通过弹窗确认后再完成标签激活状态更新：

维护两个变量：activeTab（实际渲染的激活标签）和pendingTab（临时存储用户点击的目标标签）
给q-tabs绑定model-value为activeTab，避免使用v-model触发自动切换
给每个q-tab绑定@click.prevent阻止默认切换，在点击事件中触发确认弹窗
用户确认后，再将activeTab更新为目标标签，完成切换

代码示例

模板部分

<q-tabs :model-value="activeTab">
  <q-tab label="标签1" name="tab1" @click.prevent="handleTabClick('tab1')" />
  <q-tab label="标签2" name="tab2" @click.prevent="handleTabClick('tab2')" />
  <q-tab label="标签3" name="tab3" @click.prevent="handleTabClick('tab3')" />
</q-tabs>

<!-- 自定义确认弹窗 -->
<q-dialog v-model="confirmDialogVisible">
  <q-card>
    <q-card-section>
      <p>确定要切换标签吗？</p>
    </q-card-section>
    <q-card-actions align="right">
      <q-btn label="取消" @click="confirmDialogVisible = false" />
      <q-btn label="确认" color="primary" @click="confirmTabSwitch" />
    </q-card-actions>
  </q-card>
</q-dialog>

脚本部分（Composition API）

import { ref } from 'vue'

const activeTab = ref('tab1')
const pendingTab = ref(null)
const confirmDialogVisible = ref(false)

const handleTabClick = (targetTab) => {
  if (targetTab === activeTab.value) return
  pendingTab.value = targetTab
  confirmDialogVisible.value = true
}

const confirmTabSwitch = () => {
  activeTab.value = pendingTab.value
  confirmDialogVisible.value = false
  pendingTab.value = null
}