element怎么全屏loading

您可以使用以下代码将 element 全屏 loading：

this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

其中，`lock` 参数用于锁定背景，`text` 参数用于显示加载文本，`spinner` 参数用于指定加载图标，`background` 参数用于指定背景颜色。

相关问题

element ui loading组件源码是怎样的

Element UI 的 loading 组件源码如下所示：

<template>
  <div class="el-loading-mask" v-if="visible" :style="maskStyle">
    <div class="el-loading-spinner" :style="spinnerStyle">
      <svg viewBox="25 25 50 50" class="circular">
        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
      </svg>
      <p v-if="text" class="el-loading-text">{{ text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElLoading',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    text: String,
    fullscreen: Boolean,
    spinner: {
      type: String,
      default: 'el-icon-loading'
    },
    background: {
      type: String,
      default: 'rgba(255, 255, 255, 0.7)'
    }
  },
  computed: {
    maskStyle() {
      return {
        backgroundColor: this.background
      };
    },
    spinnerStyle() {
      return {
        fontSize: this.fullscreen ? '80px' : '40px'
      };
    }
  }
};
</script>

<style scoped>
.el-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circular {
  animation: rotate .8s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.el-loading-text {
  margin-top: 10px;
  font-size: 14px;
}
</style>

以上是简化过的代码，包含了 loading 组件的模板、脚本和样式部分。

在模板中，使用了 `v-if` 指令判断 `visible` 属性是否为 true，控制 loading 遮罩层的显示与隐藏。loading 遮罩层内部包含了一个 loading 动画的 SVG 图标和一个文本提示。

在脚本部分，定义了组件的名称为 `ElLoading`，并接收了一些属性，如 `visible` 控制 loading 的显示与隐藏、`text` 设置文本提示、`fullscreen` 是否全屏显示、`spinner` 设置 loading 动画图标、`background` 设置遮罩层背景色。还使用了计算属性来动态设置遮罩层和 loading 动画的样式。

在样式部分，设置了 loading 遮罩层的样式，并定义了 loading 动画的旋转效果以及文本提示的样式。

以上就是 Element UI loading 组件的简化源码。希望对您有所帮助！如有任何疑问，请随时提问。

element ui 显示loading

Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了丰富的组件来帮助开发者快速搭建优雅的用户界面。在 Element UI 中显示 loading 效果，通常可以通过 `Dialog` 组件或者 `Loading` 组件来实现。

使用 `Dialog` 组件显示 loading 的方式是创建一个全屏的模态框，并设置其显示内容为 loading 动画或文字提示。这种方法适用于需要覆盖大部分页面内容的情况。

另一种是使用 `Loading` 组件，它提供了一个全局的静态方法来显示全屏的 loading 效果。调用 `this.$loading` 方法可以轻松地在页面上显示一个全屏的遮罩层，同时可以自定义文字描述和显示位置。

以下是一个简单的代码示例来展示如何使用 `Loading` 组件：

// 显示全局加载效果
this.$loading.service({
  lock: true, // 是否锁定背景滚动
  text: '拼命加载中…', // 加载文案
  background: 'rgba(0, 0, 0, 0.7)' // 遮罩层背景色
});

// 在适当的时候关闭加载效果
this.$loading.close();

在使用时，需要确保已经在你的 Vue 实例中正确引入并注册了 Element UI。