featue(+loading)

src/main.js

@@ -47,11 +47,11 @@ import VueParticles from 'vue-particles'
 Vue.use(VueParticles)
 
 import '@/utils/dialog'
-
+import loading from '@/utils/loading' //引入指令
 Vue.prototype.$http = axios;
 import * as Echarts5 from 'echarts5'
 Vue.prototype.$echarts5 = Echarts5;
-
+Vue.directive(loading)
 
 import 'vis/dist/vis.css'
 

src/utils/loading.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 // 创建一个简单的加载指令
 Vue.directive('loading', {
     bind(el, binding, vnode) {

src/views/service/InterfaceDetail/components/ServiceDrawer.vue

@@ -112,10 +112,10 @@
               </div>
             </div>
             <div v-else>
-              <!-- <div v-if="isLoading" v-loading="isLoading"></div> -->
-              <!-- <div v-else> -->
+              <div v-if="isLoading" v-loading="isLoading"></div>
+              <div v-else>
                 <NodeG6Charts v-if="sweetGraphData && JSON.stringify(sweetGraphData)!=&quot;{}&quot;" :chart-content-id="'serviceDrawerContainer'" :graph-data="sweetGraphData" />
-              <!-- </div> -->
+              </div>
             </div>
           </div>
           <div class="flex-right">
@@ -609,4 +609,7 @@ export default {
   align-items: center;
   z-index: 1000; /* 确保加载状态div在其他内容之上 */
 }
+// ::v-deep.el-loading-spinner{
+//   top:200px !important;
+// }
 </style>