vue3与elementui封装一个便捷Loading

针对您的问题，我将为您详细讲解如何在Vue3项目中结合ElementUI进行Loading样式封装。

首先，我们需要明确Vue3与ElementUI的相关依赖。在创建Vue3项目的时候，我们需要安装Vue3及其相关依赖：

npm install vue@next
npm install @vue/cli@next -g

而ElementUI的安装则需要使用以下命令：

npm install element-plus@next

安装完成后，我们需要在Vue3识别ElementUI。在main.js文件中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

添加完成后，我们接下来会进行封装Loading组件。

首先，在components文件夹下创建一个Loading文件夹，并在该文件夹下创建一个Loading.vue组件文件。

在Loading.vue组件文件中，我们需要引入ElementUI组件和样式。然后在template中添加一个el-popover元素作为Loading遮罩层。在el-popover内部添加一个el-spinner元素作为Loading样式。对于该组件的其他细节配置，可以访问ElementUI的文档进行参考。

<template>
  <div>
    <el-popover
      v-model="visible"
      placement="top"
      width="100%"
      height="100%"
      trigger="manual"
      :popper-class="['custom-loading', popperClass]"
    >
      <div class="loading-wrapper" v-loading="visible">
        <el-spinner size="medium" :type="spinnerType" />
      </div>    
    </el-popover>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomLoading',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    spinnerType: {
      type: String,
      default: 'spinner'
    },
    popperClass: {
      type: String,
      default: ''
    }
  },
})
</script>

<style scoped>
.custom-loading {
  background-color: transparent;
}
.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>

接下来，在我们的Loading.vue组件中，我们需要使用props接收父组件传递进来的visible、spinnerType、popperClass三个参数。这样，我们就能把Loading组件嵌套到其他组件中，使用这三个参数来控制Loading的显示和隐藏。

最后，在任何需要调用Loading的组件中，我们只需要引入Loading.vue组件，然后使用以下代码调用：

<template>
  <div>
    <CustomLoading :visible="loadingVisible" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import CustomLoading from '@/components/Loading/Loading.vue'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    CustomLoading
  },
  data() {
    return {
      loadingVisible: false
    }
  },
  methods: {
    fetchData() {
      this.loadingVisible = true
      // AJAX请求或其他操作
      this.loadingVisible = false
    }
  }
})
</script>

在上面的示例代码中，我们在data中初始化了loadingVisible为false，然后在fetchData方法中进行AJAX请求时，把loadingVisible赋值为true，实现Loading显示；而在请求完成后，我们再次把loadingVisible赋值为false，Loading就会自动隐藏。

以上就是在Vue3项目中结合ElementUI封装一个便捷Loading的完整攻略，希望可以对您有所帮助。