vue使用loading加载

1、效果:

1649832674984

2、前言:
在vue中提供v-loading命令,用于div的loading加载,因为v-loading需要绑定一个双向绑定的变量,因此会产生如果页面需要多个loading,则需要很多个变量,在此不必要的情况下,作者自己写了一个vue的插件。
1、引入依赖

#如果你的vue项目版本为3.0+,使用该命令
npm i loading-viewer-vue

# or 如果你的vue项目版本为2.0+,则使用该命令
npm i loading-view-vue

2、注册插件 (use at main.js)

#如果你的vue项目版本为3.0+
import loadingViewerVue from 'loading-viewer-vue'
createApp(App).use(loadingViewerVue)

# or 如果你的vue项目版本为2.0+,则使用该命令
import loadingViewerVue from 'loading-view-vue'
Vue.use(loadingViewerVue)

3、api 使用方法

#use in js
#展示loading
this.$showLoading();
#关闭loading
this.$hideLoading();

4、拓展

#loading 有8种模式:http://www.var6.cn/work/1/22/MD%E7%9A%84%E7%BC%96%E7%A8%8B%E4%BD%9C%E5%93%81,8种模式的loading效果可以看一下
#切换模式:设置mode:1-8
#3.0+
createApp(App).use(loadingViewerVue,{mode:"5"})

#2.0+
Vue.use(loadingViewerVue,{mode:"5"})

#如果这8种模式都不满足你的需求,你也可以设置自己的loading图标
#3.0+
createApp(App).use(loadingViewerVue,{url:require('../src/assets/loading1.svg')});

#2.0+
Vue.use(loadingViewerVue,{url:require('../src/assets/loading1.svg')})


#如果你想要设置在某个div加载(默认是body),你可以设置该div的id
#举个例子
#html
<div id="loadings"></div>
#js
#展示loading
this.$showLoading("loadings");
#关闭loading
this.$hideLoading("loadings");
#css
#loadings{
	position:relative, //这个是必须的
}

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深圳程序员打工崽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值