选项卡是一种使用较少窗口空间显示更多信息的方式。本页描述通过 QTabs、QTab 和 QRouteTab 进行的选项卡选择部分。
这个组件的一个常见用例是在布局的页眉/页脚中。请参考布局和页眉和页脚获取参考。
TIP
与QTabPanels配合使用效果很好，这是一个专门用于面板（选项卡内容）本身的组件。
用法
提示
- 当宽度超过容器宽度时，QTabs 可以水平滚动。相应调整您的浏览器以查看此效果。
- 在桌面上，您将看到可以点击的两侧箭头。
- 在移动设备上，您可以用手指滑动选项卡。
- 如果您想在移动设备上强制显示箭头，请使用
mobile-arrows属性。
WARNING
如果您不安装 Vue Router，QRouteTab 将无法与 UMD 版本一起工作。
基础
外部、内部和移动设备上可见的箭头
垂直
紧凑
单独颜色
波纹
自定义指示器
在下面的示例中，请注意最后两个 QTabs：顶部指示器和无指示器。
选项卡通知
有多种方式显示选项卡通知：使用 QBadge、通过警报点或警报图标（可以是任何图标）。
对齐
QTabs 是响应式的，当容器宽度（不是窗口宽度）大于配置的断点时，align 属性（见下文）会激活。出于演示目的，下面的选项卡已禁用断点。
在下面示例的第二个 QTabs 中，如果窗口宽度低于 1024px，则"Movies"和"Photos"选项卡将被"More…"下拉菜单替代。
带下拉菜单
在 QToolbar 上
注意我们需要指定 shrink 属性。默认情况下，QTabs 尝试扩展到所有可用的水平空间，但在这种情况下，我们将其用作 QToolbar 的子元素，所以我们不希望这样。
动态更新
与 QTabsPanel 一起使用
TIP
QTabPanels 也可以独立使用。它们不依赖于 QTabs 的存在。此外，它们可以放置在页面内的任何位置，而不仅仅是在 QTabs 附近。
更多信息：选项卡面板。
连接到 Vue Router
您可以通过 QRouteTab 组件将选项卡与 Vue Router 一起使用。 此组件继承了 QTab 的所有内容，但它也绑定了 router-link 属性。这些允许监听当前应用路由，并在点击/触摸时触发路由。
<q-tabs>
<q-route-tab icon="mail" to="/mails" exact />
<q-route-tab icon="alarm" to="/alarms" exact />
</q-tabs>WARNING
当使用带有 QRouteTab 的 QTabs 时，不建议同时使用 v-model（尽管您仍然可以），因为当前活动选项卡的真实来源由当前路由而不是 v-model 决定。每个 QRouteTab 根据您的应用路由而不是由于 v-model 变为"活动"。因此，v-model 的初始值或直接更改 v-model 不会改变您的应用路由。
匹配 QRouteTab 到当前路由 v2.9+ 更新
- 如果设置为
exact匹配：- 它指向的路由必须被 Vue Router 视为"精确活动"（完全匹配路由，忽略哈希和查询）。
- 假设 Vue Router 处于历史模式，它必须匹配配置的路由哈希（如果有）
- 它必须匹配配置的路由查询（如果有）- 当前路由查询中的任何额外查询参数不会使选项卡处于活动状态（如果您想要这样，请不要使用
exact）
- 否则，如果未设置为
exact匹配：- 它指向的路由必须被 Vue Router 视为"活动"（松散匹配路由，忽略哈希和查询）。
- 假设 Vue Router 处于历史模式，它是否配置了哈希？如果是，则必须完全匹配。
- 它是否配置了查询？如果是，则配置的查询必须包含在当前路由查询中。
- 如果多个 QRouteTab 仍然匹配当前路由（例如：路由是 /cars/brands/tesla，我们有 QRouteTabs 指向非精确的 /cars，非精确的 /cars/brands，非精确的 /cars/brands/tesla），则最具体的匹配当前路由的选项卡获胜（在这种情况下是 /cars/brands/tesla）
- 如果仍有多个 QRouteTabs 匹配上述标准，则具有最接近当前路由查询的查询的选项卡获胜（具有配置的查询，并且当前路由查询具有最少数量的额外参数）。
- 如果仍有多个 QRouteTabs 匹配上述标准，则具有最长结果 href 的选项卡获胜。
配置了 exact 的 QRouteTabs 总是优先于松散匹配（非精确）的选项卡。
处理自定义导航 v2.9+ 更新
TIP
请参考页面顶部的 QRouteTab API 卡片，获取下面使用的 @click 事件的更深入描述。
<template>
<q-tabs no-caps class="bg-orange text-white shadow-2">
<q-route-tab :to="{ query: { tab: '1' } }" exact replace label="2秒后激活" @click="navDelay" />
<q-route-tab
:to="{ query: { tab: '2' } }"
exact
replace
label="不做任何操作"
@click="navCancel"
/>
<q-route-tab
:to="{ query: { tab: '3' } }"
exact
replace
label="导航到第二个选项卡"
@click="navRedirect"
/>
<q-route-tab :to="{ query: { tab: '4' } }" exact replace label="立即导航" @click="navPass" />
</q-tabs>
</template>
<script>
export default {
setup() {
function navDelay(e, go) {
e.preventDefault(); // 我们取消默认导航
// console.log('2秒后触发导航')
setTimeout(() => {
// console.log('按照2秒前的承诺导航')
go();
}, 2000);
}
function navCancel(e) {
e.preventDefault(); // 我们取消默认导航
}
function navRedirect(e, go) {
e.preventDefault(); // 我们取消默认导航
// 在您方便时调用此函数
go({
to: { query: { tab: "2", noScroll: true } },
// replace: boolean; 默认是选项卡配置的内容
// returnRouterError: boolean; 默认为false
})
.then((vueRouterResult) => {
/* ... */
})
.catch((vueRouterError) => {
/* ...除非 returnRouterError === true，否则不会到达这里 */
});
}
function navPass() {}
return { navDelay, navCancel, navRedirect, navPass };
},
};
</script>