您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“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); /* Internet Explorer */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -o-transform: rotate(45deg); /* Opera */ 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加载中动画组件如何使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。