vue页面按钮点击后，呈现loading加载状态

按钮点击时呈现加载状态，防止其他误操作。
1.效果图

2.代码实现
（1）按钮添加：:loading="loading.listLoading"，由这个属性控制加载状态动画

<el-button type="primary" style="margin-top: 12px;" :loading="loading.listloading" @click="expScorePacks()">导出

（2）定义 loading.listLoading（true：为开启加载状态，false：关闭加载状态）

return{loading:{listloading: false,}}

（3）点击按钮时开启加载状态: this.loading.listLoading = true。将下列代码写在点击事件执行的一开始，触发加载动画演示呈现加载状态

 this.loading.listloading = true;this.$message({type: "warning",message: "数据正在导出，请耐心等待"});

(4)查询结束或抛出异常一定要关闭加载状态：this.loading.listLoading = false

if (data) {this.loading.listloading = false;this.$message({type: "success",duration: 10000,message: "操作成功"});

工作之余，匆匆记录，有问题欢迎讨论。

vue页面按钮点击后，呈现loading加载状态相关推荐

vue 页面及内部子组件加载结束以后触发
前言:在页面调用好的时候总是遇到需要页面渲染结束以后才调用的需求,今天总结一下大纲 1.vue 2.jquery 3.js 1.vue中存在mounted和$nextTick vue中的mounte ...
vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
vue跳转页面增加等待_vue-router懒加载时添加loading效果
近期在做一个微信公众号的项目,在页面跳转时发现页面会闪一下,用户体验很不好,而且如果网慢时页面是没有数据的样式会乱很丑.于是乎,就百度看了前人的各种解决方案,个人觉得以下链接中的方案还是很好的,代码简 ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
vue使用loading加载
1.效果: 1649832674984 2.前言: 在vue中提供v-loading命令,用于div的loading加载,因为v-loading需要绑定一个双向绑定的变量,因此会产生如果页面需要多个l ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
html新建通用loading,漂亮实用的页面loading(加载)封装代码
要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个html+css+js的功能封装,以备未来直接使用. html 正在登陆 css /*缓冲提示条 start* ...
Vue在请求(axios)里面实现loading加载动画
1.在main.js里引入axios import axios from "@/http/index.js" 2.在vuex中设置状态 state: {isLoading: fal ...
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
elemen-ui官方使用 <el-tablev-loading="loading"element-loading-text="拼命加载中"element ...

vue页面按钮点击后，呈现loading加载状态

vue页面按钮点击后，呈现loading加载状态相关推荐

最新文章

热门文章