快捷導(dǎo)航

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

更新時間：2022年06月14日 10:30:40 作者：水冗水孚

在vue中提供v-loading命令,用于div的loading加載,下面這篇文章主要給大家介紹了關(guān)于vue使用Vue.extend方法仿寫個loading加載中效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求描述

本文我們使用vue的extend方法實(shí)現(xiàn)一個全屏loading加載效果

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

當(dāng)然這里除了文字，背景色什么的，也可以傳遞更多的參數(shù)，具體可以根據(jù)業(yè)務(wù)場景設(shè)計，為了便于理解文章這里就不贅述了。

我們先看一下效果圖：

效果圖

代碼實(shí)現(xiàn)

第一步，新建loading組件

比如我們在src目錄下，新建loading文件夾用于存放loading相關(guān)文件，在這個文件夾下新建的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, // 控制顯示與隱藏的標(biāo)識
      backgroundColor: "rgba(0, 0, 0, 0.5)", // 默認(rèn)背景色
      text: "加載中...", // 默認(rèn)文字
    };
  },
};
</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文件用來書寫相應(yīng)js代碼，用于控制loading彈框。

src/loading/index.js

// 引入vue
import Vue from 'vue'

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

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

//創(chuàng)建實(shí)例并且掛載到一個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);
}

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

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

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

main.js

// ...

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

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

第四步，命令式調(diào)用

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

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

Vue.extend方法的理解

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

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

最終，當(dāng)我們需要彈框出現(xiàn)的時候，把這個dom元素插入到文檔對象上，不需要的時候，再將其刪除掉。這樣就實(shí)現(xiàn)了，打開和關(guān)閉彈框的效果。

總結(jié)

到此這篇關(guān)于vue使用Vue.extend方法仿寫個loading加載中效果實(shí)例的文章就介紹到這了,更多相關(guān)vue Vue.extend仿loading加載中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: