vue自定义封装Loading组件

蔚落 2023-06-23 12:59 1阅读 0赞

**一、需求问题**  
在vue项目的开发中，会经常遇到这样的需求。当在页面内容进行加载的时候，会进行请求数据，然后显示页面。在这个等待的过程中，会出现一段时间的白屏，我们可以通过加一个loading的效果，进行过渡，然后显示页面。

**二、需求分析**

1.  在`components`文件夹中，建立`Loading`文件夹，里面建立`index.vue`文件，作为`Loading`组件。这个加载组件在页面的多个位置中都可能会用的到，可以全局注册组件。在项目的`main.js`文件中写以下的代码配置，进行全局注册。

import Loading from '@/components/Loading'
    Vue.component('Loading', Loading);

1.  在`Loading`组件中，我们只需要写上相应的结构和样式，让其进行展示`loading`的效果出来。
2.  在需要使用`Loading`组件的页面中，直接进行使用。通过组件内部使用 `v-if` 而使用`isLoading` 的值，在`data`中设置`isLoading`，默认为`true`。当在数据请求完毕以后，再将 `isLoading`的值设为`false`。同时在使用`Loading`组件下面的页面内容，需要使用`v-else`，不然再请求完数据后无法显示页面内容。

**三、需求实现**

1.  `main.js`

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    import axios from 'axios'
    Vue.prototype.axios = axios;
    
    Vue.filter('setWH', (url, arg) => { 
      return url.replace(/w\.h/, arg);
    });
    
    Vue.config.productionTip = false;
    
    import Scroller from '@/components/Scroller'
    // 全局注册 Scroller 组件
    Vue.component('Scroller', Scroller);
    
    import Loading from '@/components/Loading'
    Vue.component('Loading', Loading);
    
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

1.  `Loading`下的`index.vue`，封装组件

<template>
        <div class="loader"></div>
    </template>
    
    <script>
    export default { 
        name: 'Loading'
    }
    </script>
    
    <style lang="scss" scoped>
    $colors:
      hsla(337, 84, 48, 0.75)
      hsla(160, 50, 48, 0.75)
      hsla(190, 61, 65, 0.75)
      hsla( 41, 82, 52, 0.75);
    $size: 2.5em;
    $thickness: 0.5em;
    
    // Calculated variables.
    $lat: ($size - $thickness) / 2;
    $offset: $lat - $thickness;
    
    .loader { 
      position: relative;
      width: $size;
      height: $size;
      transform: rotate(165deg);
      
      &:before,
      &:after { 
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: $thickness;
        height: $thickness;
        border-radius: $thickness / 2;
        transform: translate(-50%, -50%);
      }
      
      &:before { 
        animation: before 2s infinite;
      }
      
      &:after { 
        animation: after 2s infinite;
      }
    }
    
    @keyframes before { 
      0% { 
        width: $thickness;
        box-shadow:
          $lat (-$offset) nth($colors, 1),
          (-$lat) $offset nth($colors, 3);
      }
      35% { 
        width: $size;
        box-shadow:
          0 (-$offset) nth($colors, 1),
          0   $offset  nth($colors, 3);
      }
      70% { 
        width: $thickness;
        box-shadow:
          (-$lat) (-$offset) nth($colors, 1),
          $lat $offset nth($colors, 3);
      }
      100% { 
        box-shadow:
          $lat (-$offset) nth($colors, 1),
          (-$lat) $offset nth($colors, 3);
      }
    }
    
    @keyframes after { 
      0% { 
        height: $thickness;
        box-shadow:
          $offset $lat nth($colors, 2),
          (-$offset) (-$lat) nth($colors, 4);
      }
      35% { 
        height: $size;
        box-shadow:
            $offset  0 nth($colors, 2),
          (-$offset) 0 nth($colors, 4);
      }
      70% { 
        height: $thickness;
        box-shadow:
          $offset (-$lat) nth($colors, 2),
          (-$offset) $lat nth($colors, 4);
      }
      100% { 
        box-shadow:
          $offset $lat nth($colors, 2),
          (-$offset) (-$lat) nth($colors, 4);
      }
    }
    
    
    html,
    body { 
      height: 100%;
    }
    
    .loader { 
      position: absolute;
      top: calc(50% - #{ $size / 2});
      left: calc(50% - #{ $size / 2});
    }
    
    </style>

1.  使用组件

<template>
        <div class="movie_body">
            <Loading v-if="isLoading"/>
            <Scroller v-else> 
                <ul>
                    <li v-for="item in comingList" :key="item.id">
                        <div class="pic_show"><img :src="item.img | setWH('128,180')"></div>
                        <div class="info_list">
                            <h2>{ {  item.nm }}<img v-if="item.version" src="@/assets//maxs.png" alt=""></h2>
                            <p><span class="person">{ {  item.wish }}</span> 人想看</p>
                            <p>主演：{ {  item.star }}</p>
                            <p>{ {  item.rt }}上映</p>
                        </div>
                        <div class="btn_pre">
                            预售
                        </div>
                    </li>
                </ul>
            </Scroller>
    	</div>
    </template>
        
    <script>
    export default { 
        name: 'CommingSoon',
        data() { 
            return { 
                comingList: [],
                isLoading: true
            }
        },
        mounted() { 
            this.axios.get('/api/movieComingList?cityId=10').then((res) => { 
                var  msg = res.data.msg;
                if ( msg === 'ok') { 
                    this.comingList = res.data.data.comingList;
                    this.isLoading = false;
                }
            })
        }
    }
    </script>
    
    <style scoped>
    #content .movie_body{  flex:1; overflow:auto;}
    .movie_body ul{  margin:0 12px; overflow: hidden;}
    .movie_body ul li{  margin-top:12px; display: flex; align-items:center; border-bottom: 1px #e6e6e6 solid; padding-bottom: 10px;}
    .movie_body .pic_show{  width:64px; height: 90px;}
    .movie_body .pic_show img{  width:100%;}
    .movie_body .info_list {  margin-left: 10px; flex:1; position: relative;}
    .movie_body .info_list h2{  font-size: 17px; line-height: 24px; width:150px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
    .movie_body .info_list p{  font-size: 13px; color:#666; line-height: 22px; width:200px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
    .movie_body .info_list .grade{  font-weight: 700; color: #faaf00; font-size: 15px;}
    .movie_body .info_list img{  width:50px; position: absolute; right:10px; top: 5px;}
    .movie_body .btn_mall , .movie_body .btn_pre{  width:47px; height:27px; line-height: 28px; text-align: center; background-color: #f03d37; color: #fff; border-radius: 4px; font-size: 12px; cursor: pointer;}
    .movie_body .btn_pre{  background-color: #3c9fe6;}
    </style>