Vue中全局使用Spin组件

最新推荐文章于 2025-10-06 03:39:27 发布
原创 最新推荐文章于 2025-10-06 03:39:27 发布 · 1.4w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #ivew #web

本文介绍如何在Vue项目中全局配置并使用iview的Spin组件实现加载提示效果。通过三步操作：引入Spin、挂载到Vue原型及子组件内调用show方法，即可轻松实现页面元素加载时的提示。

如何全局使用？

1、在man.js引入Spin

import {Spin} from 'ivew'

2、将Spin挂载到Vue对象原型上

Vue.prototype.$Spin = Spin

3、在子组件调用

this.$Spin.show()

feral_coder
关注
工程化:vite3+vue3如何按需全局引入antdvue组件方法与坑点(一)
峰会路转的博客
12-11 1745
前端系统开发，组件库必不可少，我们一次性引入所有的组件库很简单暴力，但是会增加项目的体积，所以我们探讨按需引入的方式，进行项目的优化。
pixi-spine-vue-demo:试图将PIXI和PIXI-SPINE插件合并到Vue.js中
04-12
我只是在玩PIXI + PIXI-SPINE + VUE
前端 导出附件增加loading
Mmmm_jer的博客
12-14 631
之前导出通过location.href 直接进行导出 ； 直接 调用接口 页面静止时间过长，需要增加loading优化用户体验 项目中用的是axios和iview框架。 const headers = { responseType:'blob' } this.$Spin.show(); this.$http.get(url,headers).then(function(data){ if(d..
告别空白等待：Ant Design Spin与骨架屏组合使用技巧
最新发布
gitblog_00778的博客
10-06 335
在现代Web应用开发中，加载状态的优化直接影响用户体验。当用户面对空白屏幕或闪烁的内容时，70%的用户会产生负面情绪（来源：[用户体验研究资料](https://link.gitcode.com/i/a29d4f9d5a76ae2425404f12edc6c711)）。Ant Design提供了两种强大的加载反馈组件——Spin（加载指示器）和Skeleton（骨架屏），它们各有所长，但组合使用时...
基于AntDesignVue 自定义api方式生成全局加载loading效果
qq_43225508的博客
06-15 5575
基于antdesignvue自定义api生成全屏加载loading
Vue3加载中（Spin）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-06 4136
用于页面和区块的加载中状态，共有 7 种样式并且支持自定义各种样式！无论多么挑剔，都能拿下！功能丰富，简单易用，总有一款满足你的想象😁😁
Vue2加载中（Spin）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
01-24 4088
用于页面和区块的加载中状态，功能丰富，简单易用
vue自定义全局组件(自定义插件)的用法
01-19
博主最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇...
Ant Design Vue 的 Spin 组件怎么全局使用
07-13
现在，你就可以在整个项目中使用 `$spin` 对象来控制全局加载状态的显示和隐藏。例如，在你的某个组件中，可以调用 `$spin.show()` 来显示加载状态，调用 `$spin.hide()` 来隐藏加载状态。 希望这可以帮助到你！...
基于antdesign的vuejsloading组件
08-12
4. **使用Spin组件**：在Vue组件中，可以使用Spin组件来创建加载效果。例如，你可以通过控制其`visible`属性来决定加载状态的显示与隐藏，还可以自定义加载提示文本，甚至嵌套在其他组件内部。 ```html <a-spin...
封装axios使用ant-design-vue的spin实现全局加载状态
Humanideal的博客
08-02 2630
vue3+pinia+ts+ant-design-vue的Spin组件（加载中）封装axios实现全局加载状态
spin.js 库（超棒讲解）
01-12
一个 JavaScript 的提示用户等待的提示库，大致用法如下： /** 显示等待画面 */ function showSpinner() { var opts = { lines: 13, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: '#000', // #rgb or #rrggbb or array of colors speed: 1, // Rounds per second trail: 60, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target = $('#webgl-output')[0]; //var target = document.getElementById('webgl-output'); spinner = new Spinner(opts).spin(target); return spinner; } /** 隐藏等待画面 */ function hideSpinner(spinner) { spinner.stop(); }
nuxtjs在vue组件中引入单独js文件内的vue不是同一个，vue.prototype.$Spin是undefined
weixin_44679078的博客
02-16 1422
nuxtjs引入的 js 文件中，想要在axios拦截器中使用iview的spin组件做出提示，但是这里通过`import Vue from "vue";`引入vue对象，使用iview内置全局`$Spin`方法，报错`Vue.prototype.$Spin`是undefined。若在上面的vue组件中使用`this.$Spin`却是正常的。
Vue全局手动挂载组件封装（Message, Loading, Spin类组件）
似水流年的博客
12-01 4000
前言 之前一段时间笔者因为换城市发展换工作等一系列不愉快的原因博客停更了==|，原本的计划是每个月至少写一篇原创的文章出来了，现在也是断了几个月；当然在过去的几个月时间里笔者也没闲着，主要学习了React框架的一些基础知识，不过现在学习的还不是很熟练，所以暂时也是出不了成体系的文章出来。反倒是一直在使用的vue.js（2.x）框架因为业务需求再加上看之前同事写的项目研究了一下全局手动挂载组件的开发（当然了，最近 vue 3.0 也是发布了 Beta 版本，也不知道以后这一块的写法是否会发生变化）。 .
利用iview的spin方法来展示正在加载的页面
卷毛羊的博客
07-01 7928
<Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button> handleSpinShow () { this.$Spin.show(); setTimeout(() => { this.$Spin.hide(); }, 3000); }, JavaScript setTim...
加载页面全局设置spinning
qq_48964916的博客
10-18 2673
1.在app.vue 文件中设置 <template> <a-config-provider :locale="zh_CN"> <a-spin :spinning="spinning" tip="加载中..." size="large"> <router-view/> </a-spin> </a-config-provider> </template> <script> import zh_CN
IVIEW 使用Spin进行全局加载
qq_39540631的博客
12-05 2790
一、正在加载 this.$Spin.show(); 二、关闭加载 this.$Spin.hide(); 这样的话比起Spin标签的单独的使用就不会使转的圈圈图标随着页面的大小而变化。
spin.js 简易文档
简生的代码备忘录
09-03 9083
spin.js是什么？说白了就是一个loading时的菊花图案。 官方的地址是：http://fgnass.github.com/spin.js/ 特点： + 不含图片，无需外接CSS文件 + 原生JavaScript，不依赖任何库 + 可配置性高 + 没有分辨率限制 + 对旧版IE通过VML实现 + 使用@keyframe实现动画，用setTimeout()对下兼容 +
spin.js
weixin_33795093的博客
12-29 174
$ajax提交，菊花加载的方式和位置： $.ajax({ type: "get", url: "http://www.xxx.com/test.html", beforeSend: function(XMLHttpRequest){ //ShowLoading();菊花加载事件 }, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值