增加 Loading

src/views/documents/View.vue

@@ -1,35 +1,42 @@
 <script setup>
+import router from "@/router";
+import { ref } from "vue";
+import { document } from "@/plugins/api";
+import { MdPreview } from "md-editor-v3";
+import LoadingComponent from "@/components/Loading.vue";
 
-import router from '@/router';
-import { ref } from 'vue'
-import { document } from '@/plugins/api';
-import { MdPreview } from 'md-editor-v3';
-
-
-const libraryId = parseInt(router.currentRoute.value.params.LibraryId)
-const documentId = parseInt(router.currentRoute.value.params.DocumentId)
+const libraryId = parseInt(router.currentRoute.value.params.LibraryId);
+const documentId = parseInt(router.currentRoute.value.params.DocumentId);
+const loading = ref(true);
 
 const docu = ref({
-    Title: "",
-    Content: ""
-})
-
-document.libraryLibraryIdDocumentDocumentIdGet(libraryId, documentId).then((r) => {
-    docu.value = r.data
-
-    console.log(r.data)
-})
+  Title: "",
+  Content: "",
+});
 
+document
+  .libraryLibraryIdDocumentDocumentIdGet(libraryId, documentId)
+  .then((r) => {
+    docu.value = r.data;
 
+    console.log(r.data);
+  })
+  .finally(() => {
+    loading.value = false;
+  });
 </script>
 
-
 <template>
-
+  <div>
     <v-btn @click="router.back(0)">返回</v-btn>
 
-    <h2>{{ docu.Title }}</h2>
-
-    <MdPreview  :modelValue="docu.Content" />
+    <div v-if="loading">
+        <LoadingComponent> </LoadingComponent>
+    </div>
+    <div v-else>
+      <h2>{{ docu.Title }}</h2>
 
+      <MdPreview :modelValue="docu.Content" />
+    </div>
+  </div>
 </template>