使用Vue内置组件 Suspense 加载 Echarts 组件

前言：

        学习篇！

正文：

        <Suspense> 接受两个插槽：#default 和 #fallback 。它将在内存中默认渲染默认插槽的同时展示后备插槽内容。

        如果在渲染时遇到异步依赖项（异步组件和具有async setup 的组件），它将等到所有异步依赖项解析完成时再显示默认插槽。

代码：（实现功能：页面刚加载前3秒展示Loading!!!文字，三秒后展示 echarts 脑图）

子组件 echart1.vue 组件 （异步组件）

<template>
  <div class="charts" ref="chartDom"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as echart from "echarts";
let chartDom = ref(null);
let chartInstance: any = null;
const props = defineProps({
  dataList: {
    type: Object,
    require: true,
  },
});
await new Promise((resolve) => {
  setTimeout(resolve, 3000);
});
onMounted(() => {
  DrawerCharts(props.dataList);
});
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
function DrawerCharts(data: any) {
  chartInstance = echart.init(chartDom.value);

  let option = {
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove",
    },
    series: [
      {
        type: "tree",
        data: [data],
        top: "1%",
        left: "7%",
        bottom: "1%",
        right: "20%",
        symbolSize: 7,
        label: {
          position: "left",
          verticalAlign: "middle",
          align: "right",
          fontSize: 12,
        },
        leaves: {
          label: {
            position: "right",
            verticalAlign: "middle",
            align: "left",
          },
        },
        emphasis: {
          focus: "descendant",
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750,
      },
    ],
  };
  option && chartInstance.setOption(option);

}
</script>
<style scoped>
div {
  color: red;
}
.charts {
  width: 90%;
  height: 90vh;
  margin: auto;
}
</style>

父组件

<template>

  <!-- 异步组件 -->

  <Suspense>
    <!-- 具有深层异步依赖的组件 -->
    <template #default>
      <charts1 :dataList="dataList" />
    </template>
    <!-- 在 #fallback 插槽中显示 “正在加载中” -->
    <template #fallback>
      <h1>Loading !!!</h1>
    </template>
  </Suspense>
</template>
<script setup lang="ts">
import { ref, onErrorCaptured, Ref } from "vue";
import charts1 from "../../../components/charts1.vue";
let dataList: null | Ref = ref(null);

function getData() {
  let data = {
    name: "xxx产业发展专项资金管理办法",
    children: [
      {
        name: "第一章 总则",
        children: [
          { name: "第一条 战略部署与制定目的" },
          { name: "第二条 专项资金定义" },
          { name: "第三条 主管部门清单" },
          { name: "第四条 联席会议制度" },
          { name: "第五条 办公室职责" },
          { name: "第六条 部门协作要求" },
          { name: "第七条 预算管理机制" },
          { name: "第八条 使用原则与总额控制" },
        ],
      },
      {
        name: "第二章 扶持对象和方式",
        children: [
          { name: "第九条 扶持对象范围" },
          { name: "第十条 限制情形" },
          { name: "第十一条 监管协议要求" },
        ],
      },
      {
        name: "第三章 申请与受理",
        children: [
          { name: "第十二条 申报渠道" },
          { name: "第十三条 材料真实性承诺" },
          { name: "第十四条 申报分送机制" },
          { name: "第十五条 受理部门确定原则" },
        ],
      },
      {
        name: "第四章 审核与批准",
        children: [
          { name: "第十六条 审核程序" },
          { name: "第十七条 分级审批规则" },
          { name: "第十八条 综合审查流程" },
          { name: "第十九条 社会公示要求" },
          { name: "第二十条 拨付上限规则" },
        ],
      },
      {
        name: "第五章 监督与检查",
        children: [
          { name: "第二十一条 绩效评估制度" },
          { name: "第二十二条 违规追责机制" },
          { name: "第二十三条 资金违规处理" },
        ],
      },
      {
        name: "第六章 附则",
        children: [
          { name: "第二十四条 数字定义" },
          { name: "第二十五条 特殊事项处理" },
          { name: "第二十六条 政策适用依据" },
          { name: "第二十七条 施行日期" },
        ],
      },
    ],
  };
  return data;
}
dataList.value = getData();
onErrorCaptured((error) => {
  console.log(error, "..");
});
</script>
<style scoped></style>