关于vue.js:vue自定义loading

51次阅读

共计 508 个字符，预计需要花费 2 分钟才能阅读完成。

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. 本期的分享到了这里就完结啦, 心愿对你有帮忙, 让咱们一起致力走向巅峰。

正文完