久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁  >  技術(shù)干貨  > 手把手帶你用vue實(shí)現(xiàn)全屏loading插件

        手把手帶你用vue實(shí)現(xiàn)全屏loading插件

        來源:千鋒教育
        發(fā)布人:wjy
        時(shí)間: 2022-06-06 11:33:00 1654486380

        ## 前言:

        由于我們打開網(wǎng)頁時(shí),瀏覽器與服務(wù)器交互需要時(shí)間,受限于寬帶以及服務(wù)器性能,導(dǎo)致用戶在訪問一個(gè)網(wǎng)頁時(shí),往往需要一個(gè)等待期,才能在瀏覽器中真正完全展示出網(wǎng)頁內(nèi)容。在網(wǎng)頁加載過程中網(wǎng)頁就是一片空白,對于我們用戶而言,我們看到一片空白,還以為網(wǎng)站 "掛掉了",就很憂傷??!

        手把手帶你用實(shí)現(xiàn)vue全屏loading插件

        當(dāng)然了,我們針對這個(gè)問題,各大網(wǎng)站都有自己的解決方案。

        有的網(wǎng)站會用骨架屏。

        比如掘金:利用骨架屏,給用戶提醒,網(wǎng)站內(nèi)容馬上呈現(xiàn)給您,不要著急!

        有的網(wǎng)站會選擇在數(shù)據(jù)出來之前 定義一個(gè)全屏的loading,提供用于網(wǎng)站正在加載

        比如:網(wǎng)站在加載時(shí)以及網(wǎng)站刷新時(shí),會彈出全屏loading。

        ## 文章目的:

        今天我們就要帶大家實(shí)現(xiàn),在vue開發(fā)的前后端分離應(yīng)用中,實(shí)現(xiàn)在網(wǎng)頁加載以及刷新時(shí),實(shí)現(xiàn)如上圖全屏loading的效果!

        ### 功能分析

        vue項(xiàng)目中所有的請求一般都是通過axios,所以我們需要給axios新增請求和響應(yīng)攔截,在請求攔截中顯示loading,和響應(yīng)攔截中關(guān)閉loading。

        所以我們需要定義兩個(gè)全局方法,一個(gè)是顯示loading,叫$showLoading(),另一個(gè)叫$hideLoading()關(guān)閉全屏loading。

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

        上面的梳理,我們明確了,需要定義兩個(gè)全局方法,一個(gè)顯示loading一個(gè)關(guān)閉loading,這里我們定義一個(gè)Vue的插件通過插件動態(tài)給實(shí)例安裝 顯示和關(guān)閉Loading方法。

        - 定義$loading插件,在Vue構(gòu)造函數(shù)原型上添加兩個(gè)方法

        以下loading.js代碼

        ```text
        const $loading = {
            install: (Vue) => {
                // 添加 顯示loading方法
                Vue.prototype.$showLoading = () => {
                    console.log('loading顯示')
                }
                // 添加關(guān)閉loading方法
                Vue.prototype.$hideLoading = () => {
                    console.log('loading關(guān)閉')
                }
            }
        }
        export default $loading;
        // 使用時(shí) 在main.js入口函數(shù)中引入 使用插件即可安裝
        Vue.use($loading)
        ```

        - 添加axios請求和響應(yīng)攔截,調(diào)用顯示和關(guān)閉loading方法

        ```text
        import Vue from 'vue'
        // 定義Vue實(shí)例 調(diào)用全局顯示和關(guān)閉loading方法
        const vm = new Vue()
        // 請求攔截
        axios.interceptors.request.use(function (config) {
          // 在這里調(diào)用 顯示loading方法
            vm.$showLoading()
          return config
        }, function (error) {
            vm.$hideLoading()
          // 在請求出錯(cuò)調(diào)用 關(guān)閉loading方法
           
          return Promise.reject(error)
        })
        // 響應(yīng)攔截
        axios.interceptors.response.use(function (response) {
          // 在這里調(diào)用 關(guān)閉loading方法
            vm.$hideLoading()
          return response
        }, function (error) {
          // 在這里調(diào)用 關(guān)閉loading方法
            vm.$hideLoading()
          return Promise.reject(error)
        }
        ```

        此時(shí)首頁有三次請求,顯示了三次loading顯示和loading關(guān)閉!

        當(dāng)然我們 在數(shù)據(jù)請求不是打印,而是 顯示loading,數(shù)據(jù)過來時(shí)應(yīng)該關(guān)閉loading,所以接下來我們實(shí)現(xiàn)這兩個(gè)效果

        - 通過單文件組件 定義顯示loading結(jié)構(gòu)

        我們目前的問題是,在顯示loading時(shí)不是打印而是要顯示全局loading的html結(jié)構(gòu),在關(guān)閉loading時(shí)要隱藏!

        為了實(shí)現(xiàn)這個(gè)需求,我們通過vue的單文件組件來定義loading的html結(jié)構(gòu)和控制loading顯示隱藏

        loading.vue

        ```text
        <template>
         <!--
          mask是loading的背景 v-show控制loading顯示消失
         -->
         <div class="mask" v-show="isShow">       
                <div class="loading"></div>        
            </div>
            </div>
        </template>
        <script>
        export default {
            data () {
                return {
                    // loading默認(rèn)不顯示
                    isShow: false
                }
            }
        }
        </script>
        <style lang="scss">
         // 定義動畫 控制 loading旋轉(zhuǎn)
        @keyframes rotate {
          0%{
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        .mask{
          position: fixed;
          left:0;
          right:0;
          top:0;
          bottom:0;
          background-color: rgba(0,0,0,.7);
          z-index: 10000;
          display: flex;
          align-items: center;
          justify-content: center;
          .loading{
            width: 30px;
            height: 30px;
            border: 6px solid rgb(219, 140, 13);
            border-radius: 21px;
            border-left-color:transparent;
            animation: rotate 500ms infinite;
          }
        }
        </style>
        ```

        - loading.js中獲取單文件組件 html結(jié)構(gòu) 并在 $showLoading方法調(diào)用時(shí)顯示,在$hideLoading時(shí)隱藏

        loading.js中

        ```js
        import LoadingVue from './loading.vue'
        const $loading = {
            install: (Vue) => {
                // 通過 Vue.extend方法 獲取LoadingComponent 組件 類
                const LoadingComponent = Vue.extend(LoadingVue);
                // new LoadingComponent得到組件的實(shí)例
                const vm = new LoadingComponent();
                // 獲取組件實(shí)例的html 并插入到body中
                const tpl = vm.$mount().$el;
                // 插入到body中
                document.body.appendChild(tpl);
                // 添加 顯示loading方法
                Vue.prototype.$showLoading = () => {
                    // 通過改變實(shí)例 .mask v-show綁定變量控制顯示
                    vm.isShow = true
                }
                // 添加關(guān)閉loading方法
                Vue.prototype.$hideLoading = () => {
                    // 通過改變實(shí)例 .mask v-show綁定變量控制隱藏
                    vm.isShow = false
                }
            }
        }
        ```

        最后在main.js中使用插件 在axios攔截器中控制顯示隱藏就ok啦??!

        main.js

        ```js
        import Vue from 'vue'
        import loading from './plugins/loading'
        Vue.use(loading)// 構(gòu)造函數(shù)原型上就添加了$showLoading和$hideLoading方法
        ```

        axios攔截器中使用

        ```js
        import Vue from 'vue'
        // 定義Vue實(shí)例 調(diào)用全局顯示和關(guān)閉loading方法
        const vm = new Vue()
        // 請求攔截
        axios.interceptors.request.use(function (config) {
          // 在這里調(diào)用 顯示loading方法
            vm.$showLoading()
          return config
        }, function (error) {
            vm.$hideLoading()
          // 在請求出錯(cuò)調(diào)用 關(guān)閉loading方法

          return Promise.reject(error)
        })
        // 響應(yīng)攔截
        axios.interceptors.response.use(function (response) {
          // 在這里調(diào)用 關(guān)閉loading方法
            vm.$hideLoading()
          return response
        }, function (error) {
          // 在這里調(diào)用 關(guān)閉loading方法
            vm.$hideLoading()
          return Promise.reject(error)
        }
        ```

        是不是很棒,好啦我們的vue全屏loading插件到這里就完成了,小伙伴們回去試一試吧。

        更多關(guān)于web培訓(xùn)的問題,歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn),采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式,擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù),助力更多學(xué)員實(shí)現(xiàn)高薪夢想。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        抖音小店照片要求尺寸多大

        在抖音平臺開設(shè)小店已經(jīng)成為了越來越多人的選擇,相信大家已經(jīng)在各大社交平臺上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

        2023-10-08 16:14:25
        抖音招商團(tuán)長托管服務(wù)費(fèi)怎么退回來

        抖音招商團(tuán)長托管服務(wù)是抖音為有意愿創(chuàng)作內(nèi)容并帶動其他創(chuàng)作者成為團(tuán)隊(duì)成員的用戶提供的一種服務(wù)。通過該服務(wù),招商團(tuán)長可以自主組建團(tuán)隊(duì)并得到...詳情>>

        2023-10-08 16:08:53
        抖音小店怎么做代銷

        抖音已經(jīng)成為了一個(gè)非常受歡迎的短視頻應(yīng)用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

        2023-10-08 15:28:41
        怎樣開抖音小店帶貨賺錢

        隨著直播帶貨的火熱,越來越多的人開始嘗試通過抖音小店來開展帶貨業(yè)務(wù)。抖音小店是抖音直播帶貨的配套,可以讓用戶在購買直播中產(chǎn)品時(shí)就實(shí)現(xiàn)購...詳情>>

        2023-10-08 15:06:36
        能不能幫我打開抖音小店店鋪呢怎么弄

        抖音小店是近年來非?;鸨囊粋€(gè)網(wǎng)絡(luò)業(yè)務(wù),也是提供了很多商業(yè)機(jī)會的平臺。對于一個(gè)創(chuàng)業(yè)者而言,開設(shè)抖音小店是一個(gè)不錯(cuò)的選擇。但是,許多小店...詳情>>

        2023-10-08 15:01:21
        凉城县| 辽中县| 长寿区| 安丘市| 乌拉特中旗| 明溪县| 南城县| 小金县| 崇阳县| 呼伦贝尔市| 洛扎县| 喜德县| 富顺县| 兴国县| 江口县| 潞城市| 秦安县| 黄梅县| 镇雄县| 浦城县| 墨江| 锦州市| 名山县| 聂荣县| 丰都县| 哈巴河县| 南昌县| 河北省| 台江县| 纳雍县| 铜鼓县| 贵阳市| 日喀则市| 霍山县| 新建县| 五河县| 广河县| 湄潭县| 河津市| 徐汇区| 孟村|