1.新建一个loading文件夹 2.在文件夹下建一个index.vue组件和loading.js文件 ``` //index.vue <template> <transition name="animation"> <div :style="{ background: background }" v-if="visable" class="loaidng"> <div> {{ text }} </div> </div> </transition> </template> <script> export default { data() { return { visable: false, text: "loading...", background: "rgba(0,0,0,.3)", }; }, }; </script> <style> .animation-enter, .animation-leave-to { opacity: 0; } .animation-enter-active, .animation-leave-active { transition: opacity 0.6s; } .loaidng { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; } </style> ``` ``` import Vue from 'vue' import loading from './index.vue' const $app = Vue.extend(loading) const $loading = new $app().$mount(document.createElement('div')) document.body.appendChild($loading.$el) export default { install(vm) { vm.prototype.$loading = { show: (params) => { // Object.keys(params).forEach(key => { // $loading[key] = params[key] // }) $loading.visable = true }, hide: () => { $loading.visable = false } } } } ``` 主要用到了Vue 的构造器extend 他可以接受一个已有组件也可以自定义组件 返回一个实例 这个实例需要一个容器 我们创建一个 div 然后挂载到body 下面 Vue.use 接受一个install 函数 他会给你注册一个vue 的放到install的第一个参数 ``` 在main.js中引入，使用 import $loading from '@/components/loading/loading.js' Vue.use($loading) ``` 3.使用 ``` //点击后打开，2s后自动关闭 loadingShow() { this.$loading.show(); setTimeout(() => { this.$loading.hide(); }, 2000); }, ```