Vue utilise le chargement pour charger

1. Effet :

1649832674984

2. Préface :
La commande v-loading est fournie dans vue pour le chargement des divs, car v-loading doit lier une variable de liaison bidirectionnelle, donc si la page nécessite plusieurs chargements, de nombreuses variables sont nécessaires. Dans cette situation inutile, l'auteur lui-même a écrit un plug-in vue.
1. Introduire des dépendances

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

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

2. Enregistrez le plug-in (utilisez à 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. Comment utiliser l'API

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

4. Agrandissement

#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, //这个是必须的
}