登录页面加载效果

奋斗吧程序媛

已于 2022-10-28 09:53:59 修改

阅读量590

点赞数

分类专栏：前端文章标签： vue.js elementui javascript

于 2022-10-21 11:39:28 首次发布

本文链接：https://blog.csdn.net/m0_67841039/article/details/127442931

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

说明：我们在做后台管理系统的时候，都会有一个登录页面，有的时候网速比较慢，登录速度比较慢，有的用户就会一直点登录按钮（图1），体验不是特别好，基于此，优化一下，给登录页面一个加载效果，当用户点击一次登录的时候，网速比较慢的情况出现（图2）这样的效果

（图1）

（图2）

上代码：

<el-button :loading="loading" type="primary" style="width: 440px;" @click.native.prevent="clicklogin(loginForm.uid, loginForm.password)">                  
    <span v-if="!loading">登录</span>
    <span v-else> 正在登录,请稍后...</span>
</el-button>

     data() {
        return {
            loading:false,
               }
            },

特殊情况：

当我们的账号或者密码输入错误的时候，页面还是一直保持转圈圈的状态，点不了登录，显然不是我们要的效果。改进：当账号或者密码输入错误的时候，给一个报错提示，并取消加载效果。主要代码如下：

clickLogin(){
    this.$refs.loginForm.validate(valid)=>{
        if(valid){
            
            ...
            ...
            ...

        }else{

            this.$message({
                type:'error',
                message:res.message
            })

            this.loading=false

        }
    }
}