在vue中以组件的方式写一个自定义加载框

不多说先上效果图

 

• 加载框基本样式和逻辑 

<template>
<div class="my_loading_box" v-if="loading_show">
  <div class="l-wrapper">
    <!-- viewBox 可调整加载样式大小 -->
    <svg viewBox="0 0 120 120">
      <g id="circle" class="g-circles g-circles--v1">
          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
          <circle id="7" cx="60" cy="110" r="10"></circle>
          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
          <circle id="1" cx="60" cy="10" r="10"></circle>
      </g>      
  </svg>
</div>
</div>
</template>
<script>
export default {
  data(){
    return{
      
    }
  },
  props:{
    loading_show:{
      type:Boolean,
      default:false
    }
  } 
}
</script>
<style scoped>
.my_loading_box{
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;     
    z-index: 999999
}
.l-wrapper { 
  position: absolute;  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;  
  display: flex;
  align-items: center;  
  justify-content: center;  
}

svg {
	/*修改加载样式大小*/
  height: 30px;
  width: 30px;   
  overflow: visible; 
}

.g-circles {
  -webkit-transform: scale(0.9) translate(7px, 7px);
  -ms-transform: scale(0.9) translate(7px, 7px);
  transform: scale(0.9) translate(7px, 7px);
}

circle {
  /* 909399  c0c4cc*/
  fill: #909399;
  fill-opacity: 0;
  -webkit-animation: opacity 1.2s linear infinite;
  animation: opacity 1.2s linear infinite;
}
circle:nth-child(12n + 1) {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
circle:nth-child(12n + 2) {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
circle:nth-child(12n + 3) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
circle:nth-child(12n + 4) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
circle:nth-child(12n + 5) {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
circle:nth-child(12n + 6) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
circle:nth-child(12n + 7) {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
circle:nth-child(12n + 8) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
circle:nth-child(12n + 9) {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
circle:nth-child(12n + 10) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
circle:nth-child(12n + 11) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
circle:nth-child(12n + 12) {
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

@-webkit-keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}

</style>

• 使用方式

  在需要的地方引入组件，通过修改loading_show的值，控制加载框的显示和隐藏

•  组件

1. 组件注册

   • 全局注册: Vue.component('component-name',componentName)

   • 局部注册: 实例选项components注册

2. 数据传递：vue.js组件之间有三种数据传递方式

   • props

     • "props"是组件数据的一个字段，期望从父组件传下来的数据

     • props选项可以是字面量，也可以是表达式，还可以是绑定的修饰符【.sync ,双向绑定；.once,单次绑定】

     • prop验证type 的值:String、Number、Boolean、Object、Function、Array

     • 组件实例的作用域是孤立的，所以不应该在子组件的模板内直接引用父组件的数据，子组件需要显式的用props选项来获取父组件的数据

   • 组件通信

     • 子组件应当避免直接依赖父组件的数据，尽量显式的使用props传递数据

     • 事件传递的方式：

       • 监听事件$on()

       • 把事件沿着作用域链向上派送$emit()

       • 派发事件，事件验证父链冒泡$dispatch()

       • 广播事件，事件向下传导给所有后代$broadcast()

   • slot 分发内容