博主最近在项目过中,学到了一个蛮不错的东西,便是在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>
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;
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),
});
4、使用,在需要使用的地方调用插件方法
// 加载动画出现
this.$loading.show();
// 加载动画消失
this.$loading.close();
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),
});