vue使用Vue.extend方法仿寫個loading加載中效果實例

Posted on by

需求描述

本文我們使用vue的extend方法實現一個全屏loading加載效果

  • 通過命令就可以讓彈框開啟或關閉，比如this.$showDialog()開啟，this.$hideDialog()關閉
  • 方法可以傳參更改loading中的文字
  • 也可以傳參更改loading背景色

當然這裡除瞭文字，背景色什麼的，也可以傳遞更多的參數，具體可以根據業務場景設計，為瞭便於理解文章這裡就不贅述瞭。

我們先看一下效果圖：

效果圖

代碼實現

第一步，新建loading組件

比如我們在src目錄下，新建loading文件夾用於存放loading相關文件，在這個文件夾下新建的loading.vue文件是用來做彈出框的組件

src/loading/loading.vue

<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>

第二步，新建index.js文件

比如我們在src目錄下，新建的loading文件夾中再新建一個index.js文件用來書寫相應js代碼，用於控制loading彈框。

src/loading/index.js

// 引入vue
import Vue from 'vue'

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

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

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

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

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

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

第三步，在main.js中引入之

main.js

// ...

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

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

第四步，命令式調用

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

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

Vue.extend方法的理解

我們知道，無論哪種程序語言，或多或少都會有封裝、繼承、多態的思想，而Vue.extend方法就是Vue的一個用於繼承組件的方法。官方是這樣定義的：使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。

構造器也可以理解為是一個類，既然是一個類，就可以去實例化對象，extend方法可以實例一個組件對象，而這個組件對象擁有我們最初定義的loading.vue所有屬性和方法。所以我們將這個組件對象掛載到一個div上，讓其有一個著落，即成為dom元素。

最終，當我們需要彈框出現的時候，把這個dom元素插入到文檔對象上，不需要的時候，再將其刪除掉。這樣就實現瞭，打開和關閉彈框的效果。

總結

到此這篇關於vue使用Vue.extend方法仿寫個loading加載中效果實例的文章就介紹到這瞭,更多相關vue Vue.extend仿loading加載中內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：