vue防止按钮多次提交,页面加载中标志


vue项目中,难免会遇到表单提交的功能模块或页面加载的模块。

在表单提交的模块,我们需要考虑的一个问题是:在某一时刻,多次点击表单的保存按钮,那么就会发出多个保存请求,这其实是没有必要的。所以,在前端这块我们要做一个限制。

还有一个问题是:从客户的角度来说,我点击了一个按钮,我怎么知道这个按钮起作用了呢?

从上面两个角度考虑,我们可以使用加载中的标志,这里涉及到两个属性:

  1. 一个是页面和表单等的加载中标志:v-loading;
  2. 另一个是按钮加载中标志::loading。

页面和表单等的加载中标志:v-loading

加载中1

上图,当点击“确认修改”按钮之后,列表开始加载中,此时,用户就会知道这个按钮起作用了,

但是我们感觉,这个图标太丑了,我们可以对这个图标进行自定义:

加载中2

代码如下:

element-loading-text="加载中..."
v-loading = tableDataLoading
element-loading-spinner="el-icon-loading"

我们甚至可以设置它的背景颜色,用在更炫酷的地方:

加载中3

这是之前写过的一个页面,代码如下:

element-loading-text="拼命加载中"
v-loading="projectListShow"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 145, 255, 0.049)"

按钮加载中标志::loading

回过头来说,防止表单的重复提交,我们可以使用加载中属性**:loading或者直接禁用disabled**。

按钮加载中代码如下:

<el-button type="primary" @click="submitTable(tableData)" :loading="submitTableIsDisable">确定修改</el-button>

页面加载和按钮加载联合适用样式如下:加载中4

对于我现在的项目来说,我感觉使用 :loading 属性比较合适,这样比较直观,这里我是按照后台接口来的,向后台请求数据时,显示加载中标志,请求到数据之后就不显示加载中标志了。

但有的情况,可能不适用这样,可以利用定时器,在submitTable方法中定义一个定时器,设置1秒之后才能再次点击。

setTimeout(()=>{
    this.submitTableIsDisable=false;
},1000);

有的同学不喜欢按钮加载中标志,那也很简单,把**:loading属性都换成:disabled**属性就可以啦。


文章作者: 木华
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木华 !
评论