Element UI&Plus: 如何用 0.5 行代码封装 Loading

2023-10-17 00:59:38

用 Element UI/Plus 实现全屏 Loading，只需 0.5 行代码！

在构建现代网站和应用程序时，用户体验是一个至关重要的方面。当用户在您的页面上执行操作时，尤其是在发送请求或加载数据时，他们需要得到反馈，了解当前的状态。Element UI 和 Element Plus 为此提供了出色的 Loading 组件，能够优雅地显示加载动画。

传统上，在 Element UI/Plus 中实现全屏 Loading 效果需要多行代码。您需要导入组件、设置选项，并在需要时手动显示和隐藏加载层。这可能会让您的代码变得冗长且难以维护。

但是，有一种更简单的方法！通过利用 Element UI/Plus 的封装能力，您只需 0.5 行代码即可实现全屏 Loading 效果。这是如何做到的呢？

引入 Element UI/Plus

首先，您需要在您的项目中引入 Element UI/Plus。您可以通过 npm 或 yarn 安装：

npm install element-ui

或

yarn add element-plus

封装 Loading 组件

接下来，您需要创建一个封装的 Loading 组件。这将允许您在任何地方轻松地使用该组件，而无需每次都重复编写相同的代码。

// src/components/MyLoading.vue

import { ElLoading } from 'element-ui';

export default {
  name: 'MyLoading',
  components: { ElLoading },
  template: `
    <div>
      <el-loading v-if="loading" fullscreen></el-loading>
    </div>
  `,
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    showLoading() {
      this.loading = true;
    },
    hideLoading() {
      this.loading = false;
    },
  },
};

在上面的代码中，我们创建了一个名为 MyLoading 的组件。它包含一个 ElLoading 组件，该组件被设置为全屏显示。我们还添加了 loading 数据属性来控制组件的显示和隐藏。

使用封装的 Loading 组件

现在，您可以在任何地方使用封装的 MyLoading 组件。例如，您可以在页面加载时在根组件中显示它：

// src/App.vue

<template>
  <div>
    <my-loading></my-loading>
    <!-- 其他组件 -->
  </div>
</template>

<script>
import MyLoading from './components/MyLoading.vue';

export default {
  components: { MyLoading },
};
</script>