main.js 1.注册loading指令Vue.directive(’loadingbox’, { update: function (el, binding) { if(binding.value) { document.querySelector(’.loading-box’).style.display = ’’ } else { document.querySelector(’.loading-box’).style.display = ’none’ } }}); 2.增加html代码 全局loading<div class=“loader loading-box” style=“display: none”> <div class=“loader-inner ball-pulse”> <div></div> <div></div> <div></div> </div> </div>3.css样式.loading-box { position: absolute; width: 94%; z-index: 9999; display: -webkit-box; display: -ms-flexbox; display: flex; height: 92%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(255,255,255,0.5); // background: rgba(110,119,148,0.45); div{ display: block; }}.loading-box .ball-pulse > div:nth-child(1) { -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);}.loading-box .ball-pulse > div { background-color: #4b9df0; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block;}.loading-box .ball-pulse > div:nth-child(2) { -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);}.loading-box .ball-pulse > div:nth-child(3) { -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);}@keyframes scale{ 30%{ webkit-transform: scale(0.3); transform: scale(0.3); } 100% { -webkit-transform: scale(1); transform: scale(1); }}4.使用的地方和最终效果是一个动态的过程5.最终我们就可以在想要的页面中加上该指令了