Ant Design Vue Message的loading 操作中提示，在异步接口结果返回后提示消失

已于 2023-12-28 10:53:03 修改
阅读量773 收藏 6
点赞数 10
文章标签： vue.js 前端 javascript
于 2023-12-27 17:58:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjww_01/article/details/135252311
版权 
/* message(content, [duration]) duration自动关闭的延时，单位秒。设为 0 时不自动关闭。
*/
 const msgDestroy = message.loading('正在创建中，请耐心等待...',  0);  // loading效果
 http.post('xxx', {}).then(res=>{
  	msgDestroy();  // loading效果消失
 }).catch(error=>{
  	msgDestroy(); 
 })
seed_01
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue写的confirm确认框，loading加载中，message提示消息
12-06
vue写的confirm确认框，loading加载中，message提示消息 在vue的模板里引用 import message from './tips/message/index'; import confirm from './tips/confirm/index'; import loading from './tips/loading/index'; 使用comfirm需要在template中这样定义 {{inportExcelMsg}} 确定 使用message可以这样定义 //显示提示信息 showMessage:function(msg){ message.installMessage({ message: msg, time: 3000 }); } 使用loading可以在指定的div上这样定义： v-kiko-loading="loading" 使用loading变量来控制显示和隐藏
基于antdesign的vuejsloading组件
08-12
基于ant design 的vuejs loading组件
antd中的message.loading
m0_67403240的博客
03-19 2662
antd中的message.loading 今儿遇到一个需求问题，在table中的操作栏点击删除，由于是向后端发起请求，所以需要一个loading效果，loading又是使用的antd中的message.loading（）。 如下是antd中提供的写法 import { message, Button } from 'antd'; const success = () => { message .loading('Action in progress..', 2.5) .then
vue3+antdv 自定义v-loading指令
最新发布
shibaweijin的博客
05-21 233
最后在main.ts 进行注册。
ant design vue全局loading
Allen的博客
12-27 1157
ant design vue全局loading。
ant-design-vue 库 Loading 组件封装
qq_36437172的博客
09-20 3785
ant-design-vue 库中 Spin ：用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
SpringBoot+AntDesignVue实现excel导入功能
07-20
在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标题： SpringBoot+AntDesignVue 实现 ...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，...在官方文档中也写的很清楚 补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是：通过tem
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
基于AntDesignVue 自定义api方式生成全局加载loading效果
qq_43225508的博客
06-15 3200
基于antdesignvue自定义api生成全屏加载loading
Ant Design Vue 表格中按钮单独的loading详细解决方案
m0_50599032的博客
05-11 5908
ant 表格按钮单独loading , 最近项目遇到了 :loading=‘loading’ 这样会使所有的button一起loading,找了很久都没有解决方式 ,有个作者提到了set方法在这里分享给遇到同样问题的小伙伴! 话不多说上图片! 方案 <span slot="transferScheme" slot-scope="text, record"> <a-button type="link" @click="handleBtn(record)"
antd vue 全局配置loading
qq_38743783的博客
11-30 4085
2.在main.js将函数挂在在vue上 做了个传boolean的简易传值；再做了个对象类型的校验/兼容，防止外面乱传参数。1.在app.vue组件注入。3.在vue、js中调用。
vue父组件向子组件传递异步加载的数据不显示解决方案
夜月晓晓的博客
11-12 2120
vue父组件向子组件传递异步加载的数据不显示解决方案_caixiajia的专栏-CSDN博客1、父组件&lt;wxChat :data="wxChatData" :showShade="false" :contactNickname= doctor.doctorName :ownerAvatarUrl="ownerAvatarUrl" :c...https://blog.csdn.net/caixiajia/article/details/83650648除了上述使用watch进行监听的方法外，也可
Error: Cannot find module 'webpack-cli/bin/config-yargs'
zwy15841139493的博客
04-19 5836
webpack 用npn run dev启动报错， 原因是 webpack-cli 包已经从webpack分离出来了，所以要单独安装 解决方案 npm i -D webpack-cli 希望能帮到您！！！
解决请求中loading不显示的问题(element-ui+vue)
qq_58824036的博客
01-19 3552
vuex中代码 import Vue from 'vue' import Vuex from 'vuex' import { Loading } from 'element-ui' Vue.use(Vuex) Vue.use(Loading) export default new Vuex.Store({ state: { // 请求计数 apiCount: 0, // loading实例 loadingInstance: nu.
vue项目中设置全局loading时 遇到多个请求时loading加载显示问题
weixin_42484910的博客
11-23 2386
多个请求 如果有一个请求成功 则加载动画 就会结束 问题（等所有请求都完成才能结束）- 计数 记录需要加载动画的请求（isLoading不是false的）的接口数量 当关闭时 查看请求（isLoading不是false的）的数量是否完全都走过 确定则关闭。项目设置全局loading动画加载，如果页面一次加载了多个请求 ，当其中有一个接口请求成功后 loading加载动画会消失，但是其实 此时还有一个接口还未 请求成功 那么其实加载动画不应该消失的。
VUE 全局loading，message组件封装
The.One
02-24 764
样式及逻辑自定，如下举例 loading： loading.vue: <template> <div class="loading" id="vue-loading"> <div class="loadEffect"> <span></span> <span></span> <span></span&g
在antdesignvue中使用
05-20
Ant Design Vue是一套基于Vue.js的UI组件库，可以帮助我们快速搭建漂亮的界面。下面是在Ant Design Vue中使用的步骤： 1. 安装Ant Design Vue 可以使用npm或yarn进行安装。在命令行中输入以下命令： ``` npm install ant-design-vue --save ``` 或者 ``` yarn add ant-design-vue ``` 2. 引入Ant Design Vue组件 在Vue组件中引入需要的Ant Design Vue组件，例如： ```vue <template> <a-button type="primary">按钮</a-button> </template> <script> import { Button } from 'ant-design-vue'; export default { components: { 'a-button': Button } } </script> ``` 3. 引入Ant Design Vue样式 在项目的`main.js`文件中引入Ant Design Vue的样式： ```javascript import 'ant-design-vue/dist/antd.css'; ``` 这样就可以在Ant Design Vue中使用组件和样式了。更多的Ant Design Vue组件和使用方法可以查看其官方文档：https://www.antdv.com/docs/vue/introduce-cn/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值