关于vue.js:vue自定义loading

1.开发环境 vue
2.电脑系统 windows11专业版
3.在开发的过程中,咱们在获取数据的时候常常会应用增加loading来让用户体验更好,上面我来分享一下。
4.废话不多说,间接上代码:

// template 
<transition name="fade">
  <div class='g-loading-plan' v-if="isLoadingData">
      <p class="loadingText">loading...</p>
  </div>
  </transition>

// css款式如下

.g-loading-plan {
    position: fixed;
    z-index: 1010;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    .loadingText {
        color: #fff;
        font-size: 24px;
    }
}

4-1.成果如下:

5.本期的分享到了这里就完结啦,心愿对你有帮忙,让咱们一起致力走向巅峰。