vue使用Vue.extend方法仿寫個loading加載中效果實例
需求描述
本文我們使用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!
推薦閱讀:
- vue使用Vue.extend創建全局toast組件實例
- vue實現自定義組件掛載原型上
- Vue3內置組件Teleport使用方法詳解
- 使用vue組件封裝共用的組件
- 詳解vue3+quasar彈窗的幾種方式