el-button按钮的loading状态设置

一、问题描述

页面上的button按钮,希望在执行相应的操作时显示加载中的样式,在相应操作完成后按钮恢复正常状态。

二、解决方案

使用loading属性,用来控制按钮是否为加载中状态,值为true则表示正在加载中,正在执行相应的操作。

三、示例代码

  • 如下所示的代码,希望点击该按钮,触发toDownload函数,当执行该函数时 按钮显示加载中,函数执行完毕则按钮恢复正常状态。
  • 思考逻辑:当刚进入函数,先判断是否正在执行该代码,即按钮是否处于正常状态,如果按钮正在加载中即表示正在执行该代码,不能再次执行,则跳出函数,否则将按钮状态设置为加载中,然后继续执行函数。在函数内部逻辑执行完成即将结束函数的时候,将按钮设为正常状态,表示后面可以再次执行该函数。
javascript 复制代码
<el-button	@click="toDownload"
          icon="el-icon-download"
          :loading = loading>
          下载
</el-button>

// 在刚进入函数就进行判断,如果该按钮是加载中的状态,则表示函数正在执行,不能再次执行、直接跳出该函数
if (this.loading == true) {return;}    
// 如果该函数到达这一步,那么按钮正处于正常状态,可以继续执行下面的代码,此时将loading属性设为true,表示在该函数执行过程中不允许再次执行该函数    
this.loading = true
// 在函数执行结束,即将跳出函数的时候执行以下代码,表示函数已经执行完成 按钮恢复正常状态,可以再次执行该函数
this.loading = false
相关推荐
Moment1 天前
写代码也能享受?这款显示器让调试变得轻松又高效!😎😎😎
前端·后端
゜ eVer ㄨ1 天前
React-router v6学生管理系统笔记
前端·笔记·react.js
m0_526119401 天前
pdf文件根据页数解析成图片 js vue3
前端·javascript·pdf
时光少年1 天前
Compose AnnotatedString实现Html样式解析
android·前端
用户904706683571 天前
假数据生成器——JSONPlaceholder
前端
光影少年1 天前
react16中的hooks的底层实现原理
前端·react.js·掘金·金石计划
sorryhc1 天前
手写一个Webpack HMR插件——彻底搞懂热更新原理
前端·javascript·前端工程化
无双_Joney1 天前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(bug修复篇)
前端·后端·node.js
xiaoxiao无脸男1 天前
three.js
开发语言·前端·javascript
木易 士心1 天前
Vue 自定义指令详解
javascript·vue.js·ecmascript