前言

在開發(fā)的過程中，點(diǎn)擊提交按鈕，或者是一些其它場景總會遇到Loading加載框，PC的一些UI庫也沒有這樣的加載框，無法滿足業(yè)務(wù)需求，因此可以自己自定義一個(gè)，實(shí)現(xiàn)過程如下。

效果圖

如何封裝？

第1步：創(chuàng)建要封裝成全局組件的文件

<template>
  <div class="loading"
       v-show="msg.show">
    <div class="load-box">
      <!-- 圖片放在文末，自行右鍵另存為 -->
      <img src="@/assets/common/load.png">
      <span>{{ msg.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelfLoading',

  props: {
    msg: {
      type: Object,
      default: () => ({
        show: false,
        title: '加載中...'
      })
    }

  },

  methods: {
    // 顯示loading的方法
    show (title = '加載中...') {
      this.msg.show = true
      this.msg.title = title
    },

    // 隱藏loading的方法
    hide () {
      this.msg.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .load-box {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100px;
    height: 100px;
    border-radius: 5px;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.8px;
    font-size: 13px;
    img {
      width: 30px;
      margin-bottom: 8px;
      animation: rotate 0.8s linear infinite;
    }
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
</style>

第2步：注冊組件

Loading這類的通用組件一般定義為全局組件，那么直接在main.js文件中全局注冊。

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

第3步：使用組件

<template>
  <!-- 全局Loading -->
  <self-loading ref="loadingRef" />
</template>

<script>
export default {
  // 僅做示例
  created () {
    // 開啟全局Loading，不傳參默認(rèn)為 '加載中...'
    this.$refs.loadingRef.show('上傳中...')
  },

  // 僅做示例
  beforeDestroy () {
    // 隱藏全局Loading
    this.$refs.loadingRef.hide()
  }
}
</script>

圖片在這里

圖片右擊另存為即可，好像會有CSDN自動添加的水印，不太知道怎么去除，需要原圖的可以在評論區(qū)留下你的郵箱地址。

文章來源地址http://www.zghlxwxcb.cn/news/detail-617858.html

到了這里，關(guān)于Vue2封裝自定義全局Loading組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！