vue 項(xiàng)目中使用Loading組件的示例代碼
什么是vue插件?
從功能上說,插件是為Vue添加全局功能的一種機(jī)制,比如給Vue添加一個(gè)全局組件,全局指令等;
從代碼結(jié)構(gòu)上說,插件就是一個(gè)必須擁有install方法的對象,這個(gè)方法的接收的第一個(gè)參數(shù)是Vue構(gòu)造函數(shù),還可以接收一個(gè)可選的參數(shù),用于配置插件:
var myplugin = { install:function(Vue, options){ ... } }
從意義上來說,正如jQuery的$.fn使jQuery有了一個(gè)龐大的生態(tài)一樣,Vue的插件機(jī)制使Vue形成了一個(gè)生態(tài)系統(tǒng),你可以開發(fā)一個(gè)插件給別人復(fù)用。
當(dāng)在vue項(xiàng)目中請求后臺(tái)接口時(shí),常常會(huì)使用 loding 過渡數(shù)據(jù)的加載時(shí)間。
如果 loading 作為一個(gè)全局的加載狀態(tài),應(yīng)該寫在項(xiàng)目中的App.vue中
<template> <div id="app"> <router-view></router-view> <loading v-if='LOADING'/> //自己封裝的loading 組件 </div> </template> <script> export default { name: 'App' } </script>
這個(gè)Loading 組件通過 LOADING 的狀態(tài)顯示隱藏。我們希望在請求某個(gè)接口的時(shí)候,將 LOADING 改為true,當(dāng)接口請求后改為false,這樣就能實(shí)現(xiàn)loading的過渡效果了。
但是這里有一個(gè)問題,loading組件的顯示和隱藏是通過 LOADING 來控制的, 如果將 LOADING 直接定義在 App.vue 中,每次請求中直接修改 LOADING 是很麻煩的,所以推薦使用 vuex
第一步:按照官網(wǎng)的例子,在App.vue的同層目錄下新建一個(gè) store.js 文件.
// store.js const store = new Vuex.Store({ state: { LOADING: false }, mutations: { showLoading(state){ state.LOADING = true }, hideLoading (state) { state.LOADING = false } } })
第二步: 在 main.js 中引入 store.js,并掛載到 Vue 實(shí)列上
import store from './store' new Vue({ el: '#app', store, template: '<App/>', components: { App } })
第三步,在請求中改變 LOADING 的狀態(tài)
Vue 項(xiàng)目中 API 的請求方法有很多,如果項(xiàng)目比較簡單,數(shù)據(jù)量比較小,可以在在頁面中直接使用像 axios、ajax、request等的 post/get 請求。以 axios 為例:
methods:{ //通常請求都希望以異步的方式,方便數(shù)據(jù)操作 async test(){ this.$store.commit('showLoading') //這里需要將 axios 提前掛載到 Vue的屬性上。 await this.$axios.get('xxx/xxxx/xxx') this.$store.commit('hideLoading') } }
第四步: 監(jiān)聽 LOADING 狀態(tài)
Vuex 中 state 是動(dòng)態(tài)更新的,也就是不管在任何地方對某一個(gè) state的值做了修改,那么依賴該數(shù)據(jù)的 DOM 也將會(huì)發(fā)生改變。修改 App.vue 文件,監(jiān)聽 LOADING 的值的變化。
<template> <div id="app"> <router-view></router-view> <loading v-if='LOADING'/> //自己封裝的loading 組件 </div> </template> <script> import {mapState} from 'vuex' export default { computed:{ ...mapState([ 'LOADING' ]) }, name: 'App' } </script>
總結(jié):
loading的過渡效果最根本的就是通過 state 來控制 loading 組件的顯示和隱藏。在請求接口前使該狀態(tài)為 為 true,接口完成后改為 false。
簡單的 loading 組件。
一個(gè)簡單的 loading 組件,應(yīng)該會(huì)有一個(gè)遮罩層,一個(gè)過度動(dòng)畫,或者一個(gè)loading 說明。
<template> <section> <div class='mock'> <div class='main'> loading... </div> </div> </section> </template> <style> section{ width:100vh; height:100vh; position:relative; } .mock{ tion{ width:100vh; height:100vh; position:absolute; z-index:100; background-color:#abb2bf; } .main{ margin:200px auto; text-align:center: } </style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-router next(false) 禁止訪問某個(gè)頁面時(shí),不保留歷史訪問記錄問題
這篇文章主要介紹了vue-router next(false) 禁止訪問某個(gè)頁面時(shí),不保留歷史訪問記錄問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09解決vue prop傳值default屬性如何使用,為何不生效的問題
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09