vue3使用js封装全局loading

第一步

• 在components文件夹中新建myLoad.vue组件

  <template>
      <div class="loading" v-show="msg.show">
          <div>{
      {msg.title}}</div>
      </div>
  </template>
  
  <script>
  export default {
      props: {
          msg: Object,
          aaa: Number
      }
  }
  </script>
  
  <style scoped lang="scss">
  .loading {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          padding: 6px 15px;
      }
  }
  </style>
  

  第二步

  新建一个index.js文件

• import { createApp, reactive } from 'vue'
  
  import myLoad from './myLoading/myLoad'
  
  const msg = reactive({
      show: false,
      title: '拼命加载中...'
  })
  
  const $loading =