|
@@ -1,9 +1,30 @@
|
|
|
<template>
|
|
|
- <router-view />
|
|
|
+ <router-view> </router-view>
|
|
|
+ <!-- z-index: 10000; -->
|
|
|
+ <a-spin
|
|
|
+ v-if="spinning"
|
|
|
+ size="large"
|
|
|
+ :spinning="spinning"
|
|
|
+ :delay="32"
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ display: flex;
|
|
|
+ place-content: center;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ :style="
|
|
|
+ spinning && { zIndex: 10000, backgroundColor: 'grey', opacity: 0.7 }
|
|
|
+ "
|
|
|
+ />
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent } from "vue";
|
|
|
+import { defineComponent, ref, watch } from "vue";
|
|
|
+import { store } from "./features/mark/store";
|
|
|
// import TestStatus from "./test/TestStatus.vue";
|
|
|
// import TestSetting from "./test/TestSetting.vue";
|
|
|
// import TestStore from "./test/TestStore.vue";
|
|
@@ -15,9 +36,16 @@ export default defineComponent({
|
|
|
// TestSetting,
|
|
|
// TestStore,
|
|
|
// },
|
|
|
- // setup() {
|
|
|
- // console.log("inside App.vue setup");
|
|
|
- // },
|
|
|
+ setup() {
|
|
|
+ const spinning = ref(false);
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => store.globalMask,
|
|
|
+ () => (spinning.value = store.globalMask)
|
|
|
+ );
|
|
|
+
|
|
|
+ return { spinning };
|
|
|
+ },
|
|
|
// beforeCreate() {
|
|
|
// console.log("App.vue beforeCreate");
|
|
|
// },
|
|
@@ -30,9 +58,9 @@ export default defineComponent({
|
|
|
// mounted() {
|
|
|
// console.log("App.vue mounted");
|
|
|
// },
|
|
|
- updated() {
|
|
|
- console.log("App.vue updated");
|
|
|
- },
|
|
|
+ // updated() {
|
|
|
+ // console.log("App.vue updated");
|
|
|
+ // },
|
|
|
});
|
|
|
</script>
|
|
|
|