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'

 

posted on 2017-10-15 14:16  queena_w  阅读(175)  评论(0)  编辑  收藏  举报

导航