feats

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "core-js": "^3.6.5",
     "vant": "^3.0.0",
     "vue": "^3.0.0",

src/components/XLoading/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="x-loading">
+    <div v-show="show" class="loadding-wrapper">
+      <div class="loading-flex">
+        <div style="flex:none">
+          <van-loading :color="color || '#1989fa'">{{tip}}</van-loading>
+        </div>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { Loading } from 'vant'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+// import store from '../../store'
+
+export default {
+  components: {
+    [Loading.name]: Loading,
+  },
+  props: {
+    color: String,
+    tip: String,
+    xId: String,
+  },
+  setup(props) {
+    const { loading } = useModel('loading')
+
+    const show = computed(() => loading[props.xId])
+
+    return {
+      show
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.x-loading {
+  position: relative;
+
+  .loadding-wrapper {
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, .9);
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .loading-flex {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

src/main.js

@@ -2,7 +2,15 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import { router } from './router';
+import store from './store'
 import 'vant/lib/index.css';
+
+import XLoading from './components/XLoading'
+
 const app = createApp(App);
+app.use(store);
 app.use(router);
-app.mount('#app');
+
+app.component('x-loading', XLoading)
+
+app.mount('#app');

src/store/index.js

@@ -0,0 +1,8 @@
+import createStore from '@zjxpcyc/vue-tiny-store'
+import loading from './models/loading'
+
+const store = createStore({
+  loading,
+})
+
+export default store

src/store/models/loading.js

@@ -0,0 +1,9 @@
+import { reactive } from "@vue/reactivity"
+
+export default () => {
+  const loading = reactive({})
+
+  const setLoading = (id, state) => loading[id] = state
+
+  return { loading, setLoading }
+}

yarn.lock

@@ -1625,6 +1625,11 @@
   resolved "https://registry.npm.taobao.org/@xtuc/long/download/@xtuc/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=
 
+"@zjxpcyc/vue-tiny-store@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/@zjxpcyc/vue-tiny-store/download/@zjxpcyc/vue-tiny-store-1.0.1.tgz#9e67c0f08e9bddd802bdcb543a28c18181e27395"
+  integrity sha1-nmfA8I6b3dgCvctUOijBgYHic5U=
+
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"