平和网站建设php网站开发工程师面试

一、问题描述

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

二、解决方案

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

三、示例代码

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

<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