vue自定义组件
Vue.use(Loading):
index.js
1 const LoadingComponent = require('./Loading.vue') 2 const loading = { 3 install: function(Vue) { 4 Vue.component('loading', LoadingComponent) 5 } 6 } 7 module.exports = loading
Loading.vue
1 <template> 2 <div class="zns-loading"> 3 <div class="zns-loading-inner"> 4 <div class="ball-spin-fade-loader"> 5 <div></div> 6 <div></div> 7 <div></div> 8 <div></div> 9 <div></div> 10 <div></div> 11 <div></div> 12 <div></div> 13 </div> 14 </div> 15 </div> 16 </template> 17 <style scoped> 18 .zns-loading{ 19 position: fixed; 20 z-index: 1000; 21 width:100%; 22 height:90px; 23 } 24 .zns-loading-inner{ 25 display:flex; 26 display: flex; 27 height: 100px; 28 align-items: center; 29 justify-content: center; 30 } 31 @-webkit-keyframes ball-spin-fade-loader { 32 50% { 33 opacity: 0.3; 34 -webkit-transform: scale(0.4); 35 transform: scale(0.4); } 36 37 100% { 38 opacity: 1; 39 -webkit-transform: scale(1); 40 transform: scale(1); } } 41 42 @keyframes ball-spin-fade-loader { 43 50% { 44 opacity: 0.3; 45 -webkit-transform: scale(0.4); 46 transform: scale(0.4); } 47 48 100% { 49 opacity: 1; 50 -webkit-transform: scale(1); 51 transform: scale(1); } } 52 53 .ball-spin-fade-loader { 54 position: relative; } 55 .ball-spin-fade-loader > div:nth-child(1) { 56 top: 25px; 57 left: 0; 58 -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear; 59 animation: ball-spin-fade-loader 1s 0s infinite linear; } 60 .ball-spin-fade-loader > div:nth-child(2) { 61 top: 17.04545px; 62 left: 17.04545px; 63 -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear; 64 animation: ball-spin-fade-loader 1s 0.12s infinite linear; } 65 .ball-spin-fade-loader > div:nth-child(3) { 66 top: 0; 67 left: 25px; 68 -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear; 69 animation: ball-spin-fade-loader 1s 0.24s infinite linear; } 70 .ball-spin-fade-loader > div:nth-child(4) { 71 top: -17.04545px; 72 left: 17.04545px; 73 -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear; 74 animation: ball-spin-fade-loader 1s 0.36s infinite linear; } 75 .ball-spin-fade-loader > div:nth-child(5) { 76 top: -25px; 77 left: 0; 78 -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear; 79 animation: ball-spin-fade-loader 1s 0.48s infinite linear; } 80 .ball-spin-fade-loader > div:nth-child(6) { 81 top: -17.04545px; 82 left: -17.04545px; 83 -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear; 84 animation: ball-spin-fade-loader 1s 0.6s infinite linear; } 85 .ball-spin-fade-loader > div:nth-child(7) { 86 top: 0; 87 left: -25px; 88 -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear; 89 animation: ball-spin-fade-loader 1s 0.72s infinite linear; } 90 .ball-spin-fade-loader > div:nth-child(8) { 91 top: 17.04545px; 92 left: -17.04545px; 93 -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear; 94 animation: ball-spin-fade-loader 1s 0.84s infinite linear; } 95 .ball-spin-fade-loader > div { 96 background-color: #5477b2; 97 width: 15px; 98 height: 15px; 99 border-radius: 100%; 100 margin: 2px; 101 -webkit-animation-fill-mode: both; 102 animation-fill-mode: both; 103 position: absolute; } 104 </style>
自定义vue全局组件:
使用:<Loading></Loading>
app.vue
<loading></loading>
在main.js
import Loading from './components/Loading'