vue2实现自定义loading效果组件

<template> <div class="myLoadingStyle" :style="{ animation: 'fadeOutLine ' + fadeOutTime + 's both' }"> <div class="load_img"> <img class="jzxz1" src="@/assets/jzxz1.png" /> <img class="jzxz2" src="@/assets/jzxz2.png" /> </div> </div> </template> <script> export default { name: 'MyLoding', props: { aniTime: { type: Number, default: 2, //动画时间 }, }, data() { return { fadeOutTime: 0, } }, mounted() { this.fadeOutTime = Number(this.aniTime) setTimeout(() => { this.$emit('finishLoading') }, this.aniTime * 1000) }, } </script> <style lang="scss"> .myLoadingStyle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba($color: #000000, $alpha: 0.5); z-index: 9999; .load_img { width: 20%; height: 30%; position: absolute; left: 40%; top: 35%; img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none; } .jzxz1 { animation: xz1 4s infinite linear; } .jzxz2 { animation: xz2 5s infinite linear; } } @keyframes xz1 { from { transform: rotate(0deg); } 50% { transform: rotate(180deg); } to { transform: rotate(360deg); } } @keyframes xz2 { from { transform: rotate(0deg); } 50% { transform: rotate(-180deg); } to { transform: rotate(-360deg); } } @keyframes fadeOutLine { 0% { // opacity: 1; display: block; } 99% { // opacity: 0.1; } 100% { // opacity: 0; display: none; } } } </style>