说明：我们在做后台管理系统的时候，都会有一个登录页面，有的时候网速比较慢，登录速度比较慢，有的用户就会一直点登录按钮（图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}}
}