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); }, ```