閱讀使人充實，會談使人敏捷，寫作與筆記使人精確。 —— 培根

——————————————-s——————————————

有些東西總以為記住了，而在次遇到的時候卻只想起了自己曾經遇到過，而並未想起解決辦法，還是匆匆忙忙的去找自己之前的解決過程，有時候記下來，不一定是壞事，再次遇到之時，再看起來說不定又有另一種思路……

問題是使用element的Loading 載入換成自己想要的圖片

1.先寫一個單獨的樣式

.el-loading-spinner {
    background-image: url('../../assets/loding.gif');/*設定自己想要的圖片或gif*/
    background-repeat: no-repeat;
    background-size: 100px 100px;
    height: 100px;
    width: 100%;
    background-position: center;
    top: 40%;
}

.el-loading-spinner .circular {/*隱藏 預設的 loading 動畫*/
    display: none;
}

.el-loading-spinner .el-loading-text {
    /*作為擴充，這個是用來設定文字的位置的，本人沒用到文字，就沒設定，如有需要，自行設定……*/
}

2.寫完之後得在main.js中引入，而且還得是在下圖這個之後，如果不生效，放在new Vue({})之前下圖之後就可以……

3 .得有一個button按鈕

<el-button  @click="openFullScreen1">點我彈</el-button>

4.在methods中寫上這個方法

openFullScreen1() {
   const loading = this.$loading({
      lock: true,
   // text: 'Loading', 對文字的設定
   // spinner: '',可以用官網給的圖示類名
      background: 'rgba(0, 0, 0, 0.7)'
    });
     setTimeout(() => {
        loading.close();
      }, 5000);
    }

完成

記錄問題，記錄成長，對我有幫助，希望也對你有幫助，如果按照此步驟實現了，記得點個贊……