vue脚手架+elementUI，实现登录用户时的Loading...窗口

在Vue项目中使用Element UI时，可以通过全局加载组件el-loading-directive来在用户登录时显示Loading窗口。以下是实现的步骤和示例代码：

1. 安装Element UI（如果尚未安装）:

npm install element-ui --save

2. 在main.js中引入并使用Element UI:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

3. 使用el-loading-directive指令来在表单提交时显示Loading状态。

在你的登录组件的模板部分，可以添加如下代码：

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" label-width="80px">
      <!-- 登录表单内容 -->
    </el-form>
    <el-button type="primary" @click="submitForm">登录</el-button>
    <el-loading
      :lock="true"
      :text="'Loading...'"
      v-model="isLoading">
    </el-loading>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      loginForm: {
        // 登录表单数据
      },
      isLoading: false
    };
  },
  methods: {
    submitForm() {
      this.isLoading = true;
      // 模拟登录请求
      setTimeout(() => {
        this.isLoading = false;
        // 登录成功后的逻辑
      }, 2000);
    }
  }
};
</script>

在上述代码中，el-loading组件绑定了isLoading变量。当用户点击登录按钮时，submitForm方法会被触发，这将设置isLoading为true，显示Loading窗口。在这个例子中，使用setTimeout来模拟异步请求。请求完成后，Loading窗口将通过设置isLoading为false关闭。