前端学习（2397）：loading加载进度条

 

 

app.vue

<template>
  <div id="app">

    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style lang="less">

</style>

index.vue

<template>
  <div class="login-container">
    <!--必须用el-form进行包裹-->
    <div class="login-head"></div>
    <el-form class="login-form" ref="form" :model="user">
      <el-form-item>
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>

        <el-form-item>
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked">我已阅读并同意用户协议和隐私条款</el-checkbox>

      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'LoginIndex',
  components: {
  },
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码

      },
      loginLoading: false, // 登录的loding状态
      checked: false// 是否同意协议
    }
  },
  methods: {
    onLogin () {
      // 获取表单数据
      const user = this.user
      // 开启loading
      this.loginLoading = true
      // 验证通过
      request({
        method: 'POST',
        url: '/mp/v1_0/authorizations',
        data: user
      }).then(res => {
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'

        })
        this.loginLoading = false
      }).catch(err => {
        console.log('登录失败', err)
        this.$message.error({
          message: '手机号或者验证码错误',
          type: 'warning'

        })
        this.loginLoading = false
      })
    }
  }
}
</script>
<style scoped lang="less">
.login-container{
position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-head{
    width: 300px;
    height: 57px;
    background:url("./logo_index.png") no-repeat;
    margin-bottom: 30px;
  }
  .login-form{
    background-color: #fff;
    padding: 50px;
    min-width: 300px;
    .login-btn{
      width: 100%;
    }
  }
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './styles/index.less'
// 加载组件库
import ElementUI from 'element-ui'
// 加载样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 注册组件库
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index'
Vue.use(VueRouter)

// 路由配置表
const routes = [{
  path: '/login',
  name: 'login',
  component: Login
}]
const router = new VueRouter({
  routes
})

export default router

运行结果