<template>
  <!-- 打開彈框的動畫 -->
  <transition name="animation">
    <div
      class="loadindWrap"
      v-if="showLoading"
      :style="{ background: backgroundColor }"
    >
      <div class="loadingContent">
        <div class="iBox">
          <i class="el-icon-loading"></i>
        </div>
        <div class="text">{{ text }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showLoading: false, // 控制顯示與隱藏的標識
      backgroundColor: "rgba(0, 0, 0, 0.5)", // 默認背景色
      text: "加載中...", // 默認文字
    };
  },
};
</script>

<style lang="less" scoped>
.loadindWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loadingContent {
    color: rgb(160, 233, 66);
    text-align: center;
    .iBox {
      margin-bottom: 6px;
      i {
        font-size: 20px;
        color: #bfa;
      }
    }
  }
}
// 加一個過渡效果
.animation-enter, .animation-leave-to { opacity: 0;}
.animation-enter-active, .animation-leave-active { transition: opacity 0.6s; }
</style>

// 引入vue
import Vue from 'vue'

// 引入loading組件
import dialog from './loading';

// 通過Vue的extend方法繼承這個引入的dialog組件，繼承后會返回一個vue子類，需要使用實例化即可
const Dialog = Vue.extend(dialog);

//創(chuàng)建實例并且掛載到一個div上
const app = new Dialog().$mount(document.createElement('div'))

// 打開彈框函數(shù)
function showDialog(options) {
    //初始化調(diào)用傳遞過來的參數(shù)賦值更改組件內(nèi)內(nèi)部值
    for (let key in options) {
        app[key] = options[key];
    }
    // 讓其顯示
    app.showLoading = true
    // 并將其插入body中
    document.body.appendChild(app.$el);
}

// 關閉彈框函數(shù)
function hideDialog() {
    // 因為是v-if去控制，所以將標識showLoading置為false，就會自動把彈框dom刪掉
    app.showLoading = false
}

// 將打開函數(shù)和關閉函數(shù)都掛載到Vue原型上，方便我們調(diào)用
Vue.prototype.$showDialog = showDialog;
Vue.prototype.$hideDialog = hideDialog;

// ...

// 最后要在main.js中引入，表示使用之，這樣在任意組件中都可以執(zhí)行對應方法了
import './loading/index.js'

new Vue({
  render: h => h(App),
  router,
  store // 掛載上去
}).$mount('#app')

<template>
  <div class="aBox">
    <el-button @click="show">點擊出現(xiàn)加載中彈框</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // 通過指令的方式即可調(diào)用，很方便
    show() {
      this.$showDialog({
        text: "瀏覽器在加載中哇...",
      });
      // 模擬發(fā)請求，過了1.5秒鐘再將其關閉
      setTimeout(() => {
        this.$hideDialog();
      }, 1500);
    },
  },
};
</script>