Vue加载中动画组件如何使用

这篇文章主要介绍“Vue加载中动画组件如何使用”，在日常操作中，相信很多人在Vue加载中动画组件如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue加载中动画组件如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

（模仿ant-design加载中样式）效果图如下：

①创建Loading.vue组件：

<template>  <div class="m-spin-dot">    <span class="u-dot-item"></span>    <span class="u-dot-item"></span>    <span class="u-dot-item"></span>    <span class="u-dot-item"></span>  </div></template><script>export default {  name: 'Loading'}</script><style lang="less" scoped>.m-spin-dot {  // 水平垂直居中  position: relative;  top: calc(50% - 18px);  margin: 0 auto;  width: 36px;  height: 36px;  transform: rotate(45deg);  -ms-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -webkit-transform: rotate(45deg);   -o-transform: rotate(45deg);   animation: rotate 1.2s linear infinite;  -webkit-animation: rotate 1.2s linear infinite;  @keyframes rotate {    100% {transform: rotate(405deg);}  }  .u-dot-item { // 单个圆点样式    position: absolute;    width: 10px;    height: 10px;    background: @mainColor;    border-radius: 50%;    opacity: .3;    animation: spinMove 1s linear infinite alternate;    -webkit-animation: spinMove 1s linear infinite alternate;    @keyframes spinMove {      100% {opacity: 1;}    }  }  .u-dot-item:first-child {    top: 0;    left: 0;  }  .u-dot-item:nth-child(2) {    top: 0;    right: 0;    animation-delay: .4s;    -webkit-animation-delay: .4s;  }  .u-dot-item:nth-child(3) {    bottom: 0;    right: 0;    animation-delay: .8s;    -webkit-animation-delay: .8s;  }  .u-dot-item:last-child {    bottom: 0;    left: 0;    animation-delay: 1.2s;    -webkit-animation-delay: 1.2s;  }}</style>

②在要使用的页面引用：

import Loading from '@/components/Loading'components: {    Loading}<div :class="['m-area', {'loading': isLoading}]"    <Loading /></div>.m-area {    margin: 0 auto;    width: 500px;    height: 400px;    background: #FFFFFF;}.loading { // 加载过程背景虚化    background: #fafafa;    pointer-events: none; // 屏蔽鼠标事件}

到此，关于“Vue加载中动画组件如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！