2-6 Loading组件设置为全局组件

一、设置Loading组件

// src/components/Loading
<template>
    <van-loading size="40px" class="loading" type="spinner" color="#333" />
</template>
<script>
export default {
    name:"Loading"
}
</script>
<style scoped>
.loading{
  position: fixed;
  left:50%;
  top:50%;
  z-index: 200;
}
</style>

二、main.js中注册为全局组件

import Loading from '@/components/Loading'
Vue.component('Loading',Loading);

三、组件中直接使用

// components/City组件中直接使用
<template>
  <div class="content">
    <Loading v-show="isLoading"></Loading>
  </div>
</template>