在Vue项目中自定义全局插件——全局Loading插件_vue git loading

作者：羊村懒王 | 2024-03-11 11:33:25

踩

vue git loading

博主最近在项目过中，学到了一个蛮不错的东西，便是在vue项目中设置全局插件，这篇博客主要讲解怎么在vue中设置全局加载插件。
1、编写加载插件样式，博主就写了一个遮罩层里面有一个git图，来作为一个加载特效。如下：

<template>
  <div id="bq-loading" @click.stop v-show="show">
    <img src="@/assets/images/loading.gif" alt="" class="loading-img pc-loading-img">
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false
    };
  }
};
</script>

<style lang="scss" scoped>
#bq-loading {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  color: #000;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  .loading-img {
    width: 50px;
    height: 50px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2、在vue中定义插件对象

// 引入加载样式文件
import loadingTempalte from './loading.vue';

// 定义插件对象
function loading () {
  return loading;
}
// Vue的install方法，用于定义vue插件
loading.install = Vue => {
  // 使用Vue构造器，创建加载“子类”
  const Loading = Vue.extend(loadingTempalte);
  // 实例化
  const $vm = new Loading();
  // el官方注解：
  // 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
  // 在实例挂载之后，元素可以用 vm.$el 访问。
  // 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译
  // 提供的元素只能作为挂载点。所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。
  // 挂载到元素上;$el访问元素并插入到body中
  document.body.appendChild($vm.$mount().$el);
  // Vue原型上添加显示方法，以便全局调用
  Vue.prototype.$loading = {
    // 显示
    show () {
      $vm.show = true;
    },
    // 关闭
    close () {
      $vm.show = false;
    }
  };
};

export default loading;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3、在main.js中全局注册插件

import Vue from "vue";
import App from "./App";
import store from "./store";
import router from "./router";
// 引入
import loading from './plugins/loading/loading.js';

Vue.config.productionTip = false;
// 注册
Vue.use(loading);

new Vue({
  router,
  store,
  render: (h) => h(App),
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、使用，在需要使用的地方调用插件方法

// 加载动画出现
this.$loading.show();
// 加载动画消失
this.$loading.close();
1
2
3
4

5、完成

6、拓展
如果，你写了比较多的全局插件又不想一个一个的在main.js中注册，那么可以将全局插件统一写在同一个的文件夹内，然后在main.js中遍历整个文件夹并将插件进行注册。
1）插件文件以及单个插件的目录样式
在这里插入图片描述
2）优化在main.js中全局注册插件的方法，修改如下

import Vue from "vue";
import App from "./App";
import store from "./store";
import router from "./router";

Vue.config.productionTip = false;

// 注册自定义插件
const requirePlug = require.context(
  './plugins',
  true,
  /\.js$/
);
requirePlug.keys().forEach(fileName => {
  const plugConfig = requirePlug(fileName);
  Vue.use(plugConfig.default || plugConfig);
});

new Vue({
  router,
  store,
  render: (h) => h(App),
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/218771