vue:自定义指令v-loading v-role

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.最终我们就可以在想要的页面中加上该指令了