vue 组件全局封装_vue项目全局封装一个loading组件

1.loading组件

export default {

props: {

title: {

type: String,

default: '正在载入...'

}

}

}

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

section {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.3);

z-index: 999;

display: flex;

align-items: center;

justify-content: center;

}

.loading {

width: 100%;

text-align: center;

/* flex-direction: column; */

}

.loading span{

display: inline-block;

width: 8px;

height: 100%;

border-radius: 4px;

background: lightgreen;

-webkit-animation: load 1s ease infinite;

margin-left: 5px;

}

@-webkit-keyframes load{

0%,100%{

height: 40px;

background: lightgreen;

}

50%{

height: 70px;

margin: -15px 0;

background: lightblue;

}

}

.loading span:nth-child(2){

-webkit-animation-delay:0.2s;

}

.loading span:nth-child(3){

-webkit-animation-delay:0.4s;

}

.loading span:nth-child(4){

-webkit-animation-delay:0.6s;

}

.loading span:nth-child(5){

-webkit-animation-delay:0.8s;

}

2.在loading.vue同级下创建一个loading.js

import loading from './loading.vue';

const Loading = {

install:function(Vue) {

Vue.component('Loading', loading)

}

}

export default Loading;

3.在main.js注册

import Vue from 'vue'

import loading from './components/loading'

Vue.use(loading)

4.在组件中使用封装好的loading组件