bootstrapvue tab

在 BootstrapVue 中，`<b-tabs>` 和 `<b-tab>` 组件被广泛用于构建可切换的标签页界面。该组件支持多种配置方式，包括基础使用、动态激活、懒加载内容以及与 Vue Router 集成等。 ### 基础使用 以下是一个简单的使用示例，展示如何通过点击标签切换内容： ```vue <template> <div> <b-tabs content-class="mt-3"> <b-tab title="首页" active>这是首页内容</b-tab> <b-tab title="服务">这是服务页面内容</b-tab> <b-tab title="联系">这是联系方式页面内容</b-tab> </b-tabs> </div> </template> <script> export default { name: 'TabsExample' } </script> ``` ### 动态绑定激活状态 可以通过 `v-model` 实现动态控制当前激活的 tab 索引，允许在 JavaScript 中控制切换逻辑[^1]： ```vue <template> <div> <b-tabs v-model="activeTab" content-class="mt-3"> <b-tab title="Tab 1">内容 1</b-tab> <b-tab title="Tab 2">内容 2</b-tab> <b-tab title="Tab 3">内容 3</b-tab> </b-tabs> <p>当前激活的 Tab 索引：{{ activeTab }}</p> </div> </template> <script> export default { data() { return { activeTab: 0 } } } </script> ``` ### 自定义标题和图标支持 `<b-tab>` 支持插槽机制，可以自定义每个标签的标题内容，例如添加图标或复杂结构： ```vue <template> <div> <b-tabs content-class="mt-3"> <b-tab :title="`<i class='fas fa-home'></i> 首页`" active> 这是首页内容。 </b-tab> <b-tab :title="`<i class='fas fa-cog'></i> 设置`"> 这是设置页内容。 </b-tab> </b-tabs> </div> </template> ``` ### 懒加载内容（Lazy Rendering） 如果某个 tab 的内容较重（如包含大量数据或图片），可以使用 `lazy` 属性确保其仅在首次被激活时渲染： ```vue <b-tab title="延迟加载" lazy> 此内容仅在第一次显示时渲染。 </b-tab> ``` ### 与 Vue Router 集成 BootstrapVue 的 `<b-tabs>` 还支持与 Vue Router 结合使用，实现基于 URL 的 tab 切换体验： ```vue <template> <b-tabs v-model="routeTab" router end content-class="mt-3"> <b-tab title="主页" to="/tabs/home">主页内容</b-tab> <b-tab title="关于" to="/tabs/about">关于内容</b-tab> </b-tabs> </template> <script> export default { data() { return { routeTab: null } } } </script> ``` ### 手动触发 Tab 切换 如果希望以编程方式切换 tab，可以通过 `$bvTabs` 插件方法实现： ```js this.$bvTabs.selectTab('tab-id') ``` 在模板中为每个 tab 指定唯一 ID： ```vue <b-tab id="tab-1" title="Tab 1">内容 1</b-tab> ``` 然后在方法中调用： ```js methods: { switchToTab1() { this.$bvTabs.selectTab('tab-1') } } ``` ---