<template>
  <div>
    <p>默认全屏loading，2s后关闭</p>
    <ui-button @click="clickHandler">start loading</ui-button>
    <ui-button @click="small=!small">toggle small</ui-button>
    <ui-loading v-if="visible" :small="small"></ui-loading>
  </div>
</template>

<script>
export default {
  data(){
    return {
      visible:false,
      small:false
    }
  },
  methods:{
    clickHandler(){
      this.visible = true
      setTimeout(()=>{
        this.visible = false
      },2000)
    }
  }
}
</script>

<style>

</style>

<template>
  <div>
    <div style="height:200px;border:1px solid" v-loading="loading"></div> 
    <ui-button @click="loading = !loading">toggle loading</ui-button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false
    }
  }
}
</script>

<style>

</style>