手写 vue loading加载组件

╰+攻爆jí腚メ 2022-12-11 12:30 114阅读 0赞

手写 vue loading加载组件 ，在要用的组件直接引入，传入: `<load :loading="loading"></load>`  
![在这里插入图片描述][20201001023919901.gif_pic_center]

<template>
      <div class="box" v-if="loading">
        <div class="loading">
          <div class="headewai"></div>
          <div class="headenei"></div>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
        loading: { 
          type: Boolean,
          default: false
        }
      }
    };
    </script>
    
    <style  scoped>
    .headewai { 
      position: absolute;
      border-width: 30px;
      border-style: solid;
      border-color: #f4f4f4 #f4f4f4 #f4f4f4 blue;
      animation: dong 1.5s infinite reverse linear;
      width: 0;
      height: 0;
      border-radius: 50%;
    }
    
    .headenei { 
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -27px 0 0 -27px;
    }
    
    .loading { 
      width: 60px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -30px 0 0 -30px;
    }
    .box { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
    }
    @keyframes dong { 
      from { 
        transform: perspective(100px) rotate(0);
      }
      to { 
        transform: perspective(800px) rotate(-720deg);
      }
    }
    </style>

在组件里面引入 使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center]

[20201001023919901.gif_pic_center]: /images/20221123/9179707503264de08100da08858a382d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6996791e986a47b0a25a0683f0515249.png