loading and hide loading

hichina-main-front-mobile-first/quasar.config.js

@@ -84,7 +84,7 @@ module.exports = configure(function (ctx) {
 
     // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
     framework: {
-      config: { notify: {} },
+      config: { notify: {}, loading: {} },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -97,7 +97,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ["Notify"],
+      plugins: ["Notify", "Loading"],
     },
 
     // animations: 'all', // --- includes all animations

hichina-main-front-mobile-first/src/boot/globalMixin.js

@@ -1,5 +1,4 @@
 import { boot } from "quasar/wrappers";
-import { useQuasar } from "quasar";
 import vueCountryRegionSelect from "vue3-country-region-select";
 // "async" is optional;
 // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
@@ -9,8 +8,6 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
     console.log("testGlobal2");
   };
 
-  const $qu = useQuasar();
-
   app.use(vueCountryRegionSelect);
 
   const normalizeMultiImageUrl = (input) => {
@@ -52,12 +49,12 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
     }
   };
 
-  const showLoading = () => {
-    $qu.loading.show();
+  const showLoading = (q) => {
+    q.loading.show();
   };
 
-  const hideLoading = () => {
-    $qu.loading.hide();
+  const hideLoading = (q) => {
+    q.loading.hide();
   };
 
   app.config.globalProperties.$testGlobal2 = testGlobal2;

hichina-main-front-mobile-first/src/pages/BlogCreatePage.vue

@@ -117,17 +117,17 @@ export default {
       params.content = content.value;
       params.headImageUrl = "";
 
-      gp.$showLoading();
+      gp.$showLoading($q);
 
       api
         .post("/api/v1/blog", params)
         .then((res) => {
           console.log(res.data.data.blogId);
-          gp.$hideLoading();
+          gp.$hideLoading($q);
           gp.$goPage("/blog-detail/" + res.data.data.blogId);
         })
         .catch((err) => {
-          gp.$hideLoading();
+          gp.$hideLoading($q);
           console.error("Error:", err);
         });
     }

hichina-main-front-mobile-first/src/pages/BlogEditPage.vue

@@ -128,16 +128,16 @@ export default {
       params.content = content.value;
       params.headImageUrl = "";
 
-      gp.$showLoading();
+      gp.$showLoading($q);
       api
         .put("/api/v1/blog/edit-basic/" + route.params.blogId, params)
         .then((res) => {
-          gp.$hideLoading();
+          gp.$hideLoading($q);
           gp.$generalNotify($q, true, "Succeed updating blogs");
         })
         .catch((err) => {
           console.error("Error:", err);
-          $gp.$hideLoading();
+          $gp.$hideLoading($q);
           gp.$generalNotify($q, false, "Failed updating blogs");
         });
     }