简化写法，采用 ClientOnly 解决 Non-SSR-Friendly 组件编译问题 (a82bc440) · Commits · sustech-online / sustech-online-ng

docs/.vuepress/components/TabView.vue

+14 −42

Changes for docs/.vuepress/components/TabView.vue: 14 added lines, 42 removed lines.
Original line number	Diff line number	Diff line
		<template>
		<div v-if="TabsComponent">
		<div>
		<a-config-provider :theme="{
		token: {
		colorPrimary: '#49BF7C',
		},
		}">
		<component :is="TabsComponent" type="card" size="large">
		<component :is="TabPaneComponent" key="tab1">
		<a-tabs type="card" size="large">
		<a-tab-pane key="tab1">
		<template #tab>
		<div class="tab-text">车辆实时位置<br />Bus Realtime Location</div>
		</template>
		位置每5秒自动刷新。Location refreshes automatically every 5 seconds
		<component :is="RealtimeMapComponent" v-if="RealtimeMapComponent" />
		<component :is="BusChartVueComponent" v-if="BusChartVueComponent" />
		</component>
		<component :is="TabPaneComponent" key="tab2">
		<RealtimeMap />
		<BusChartVue />
		</a-tab-pane>
		<a-tab-pane key="tab2">
		<template #tab>
		<div class="tab-text">时间表<br />Timetable</div>
		</template>
		<component :is="BusTableComponent" v-if="BusTableComponent" />
		</component>
		</component>
		<BusTable></BusTable>
		</a-tab-pane>
		</a-tabs>
		</a-config-provider>
		</div>
		</template>

		<script>
		import { onMounted, ref } from 'vue';
		import { Tabs } from 'ant-design-vue';
		import { ConfigProvider } from 'ant-design-vue';

		export default {
		name: 'TabView',
		components: {
		ATabs: Tabs,
		ATabPane: Tabs.TabPane,
		AConfigProvider: ConfigProvider
		},
		setup() {
		// 因为 RealtimeMap 和 BusTable 里面用了 document，所以需要用到异步加载。
		const TabsComponent = ref(null);
		const TabPaneComponent = ref(null);
		const RealtimeMapComponent = ref(null);
		const BusChartVueComponent = ref(null);
		const BusTableComponent = ref(null);

		onMounted(async () => {
		const { Tabs } = await import('ant-design-vue');
		const { TabPane } = Tabs;
		const RealtimeMap = await import('./RealtimeMap.vue');
		const BusChartVue = await import('./BusChartVue.vue');
		const BusTable = await import('./BusTable.vue');

		TabsComponent.value = Tabs;
		TabPaneComponent.value = TabPane;
		RealtimeMapComponent.value = RealtimeMap.default;
		BusChartVueComponent.value = BusChartVue.default;
		BusTableComponent.value = BusTable.default;
		});

		return {
		TabsComponent,
		TabPaneComponent,
		RealtimeMapComponent,
		BusChartVueComponent,
		BusTableComponent,
		};
		},
		}
		};
		</script>

docs/transport/bustimer-wx.md

+2 −0

Changes for docs/transport/bustimer-wx.md: 2 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -8,4 +8,6 @@ navbar: false

		<a data-fancybox title="" href="https://mirrors.sustech.edu.cn/git/sustech-online/sustech-online-ng/-/raw/master/docs/transport/busline2.png">![](./busline2.png)</a>

		<ClientOnly>
		<TabView></TabView>
		</ClientOnly>

docs/transport/bustimer.md

+2 −0

Changes for docs/transport/bustimer.md: 2 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -4,4 +4,6 @@

		<a data-fancybox title="" href="https://mirrors.sustech.edu.cn/git/sustech-online/sustech-online-ng/-/raw/master/docs/transport/busline2.png">![](./busline2.png)</a>

		<ClientOnly>
		<TabView></TabView>
		</ClientOnly>