使用 Bootstrap Vue 在 Vue JS 上单击选项卡后如何加载组件？

Posted 2023-02-16

【中文标题】使用 Bootstrap Vue 在 Vue JS 上单击选项卡后如何加载组件？

【英文标题】：How to load component after a tab is clicked on Vue JS with Bootstrap Vue?

【发布时间】：2019-04-04 02:29:25

【问题描述】：

我在 html 中有以下代码（使用 Vue JS 和 Bootstrap 编码）：

<b-tabs card>
        <b-tab title="Followers" :title-link-class="'tab-title-class'">
              Page View graph here
        </b-tab>
        <b-tab title="Orders" :title-link-class="'tab-title-class'">
              Order Numbers graph here
        </b-tab>
        <b-tab title="Sales" :title-link-class="'tab-title-class'">
              <sales-analytics></sales-analytics>
        </b-tab>
        <b-tab title="Profit" :title-link-class="'tab-title-class'">
              Earning graph here
        </b-tab>
</b-tabs>

该卡片包含 4 个选项卡，其中一个标题为“销售”，<sales-analytics></sales-analytics> 是我创建的一个组件，用于使用 Vue-ApexCharts 库呈现图形。但是，选择选项卡时，图形不会自动呈现。它只能在我在 Chrome 上单击 F12 后运行，重新加载页面也不起作用。

我认为该组件应该只在选择选项卡后运行，而不是在加载站点时完全运行（因为当站点加载时未选择选项卡时，这会导致呈现问题）。有谁知道如何实现这个？或者解决这个问题的替代方法？

脚本部分的更多内容：

<script>
   import Sales from '../analytics/Sales'

export default 
    components:       
        'sales-analytics': Sales

</script>

编辑： 经过一番谷歌搜索，我发现了这个：https://github.com/apertureless/vue-chartjs/issues/157 这与我的情况有非常相似的行为，我想在选择选项卡后 v-if 并安装以加载组件。有人知道怎么做吗？

【问题讨论】：

在页面加载时渲染组件不是问题，因为 Vue-ApexCharts 在隐藏在引导选项卡中时需要重新绘制图形。有很多这样的例子，有几十个图表库。

感谢您的评论。知道如何在选择选项卡后强制 ApexCharts 重绘吗？

【参考方案1】：

component: resolve => 
            require(['./component.vue'], resolve);
        ,

这是在使用时加载的。可能还需要v-if

【讨论】：

您好，请问我应该在哪里插入此代码？

【参考方案2】：

如果你想强制 ApexCharts 在选项卡选择后重绘，你应该调用 refresh() 方法重绘图表

<template>
  <div class="example">
    <apexcharts ref="chart"   :options="chartOptions" :series="series"></apexcharts>
  </div>
</template>

<script>
  afterTabSelection: function() 
    this.$refs.chart.refresh()
  ,
</script>

【参考方案3】：

谢谢所有的cmets。对于任何未来的参考，我能够通过使用v-if 检查当前活动选项卡，然后加载范围下的组件来解决问题。

<div v-if=“activeTab === ‘sale’>

【参考方案4】：

根据BootstrapVue docs，它内置仅在激活选项卡时加载组件和数据：

有时最好仅在以下情况下才加载组件和数据 激活选项卡，而不是加载所有选项卡（和相关数据） 渲染集合时。

单个组件可以通过lazy prop延迟加载， 设置时不会挂载的内容，直到它是 已激活（如图所示），并且会在选项卡停用时卸载 （隐藏）：

<b-tab lazy>

也可以通过在 父组件：

<b-tabs lazy>

改编为问题中的代码：

<b-tab lazy title="Sales" :title-link-class="'tab-title-class'">
    <sales-analytics></sales-analytics>
</b-tab>

此解决方案的缺点：不能有条件地使用lazy 指令。这意味着，如果您使用v-for 渲染它们，则不能延迟加载某些选项卡。