<template>
  <div>
    <lyf-loading>默认加载</lyf-loading>
    <hr/>
    <lyf-loading iconColor="orange">改变icon颜色</lyf-loading>
    <hr/>
    <lyf-loading iconColor="white">改变icon颜色</lyf-loading>
    <hr/>
    <lyf-loading :size="30" :fontSize="20" fontColor="#0E60FF">改变大小和文字颜色</lyf-loading>
    <hr/>
    <lyf-loading :size="40" :fontSize="30" iconColor="gray">改变大小和icon颜色</lyf-loading>
    <hr/>
    <lyf-loading :size="30" fontColor="#0E60FF" :vertical="true">改变方向</lyf-loading>
    <hr/>
    <div class="wrap">
      <lyf-button @click="showLoading">打开全局loading</lyf-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    showLoading() {
      this.lyfLoading({
        message: '提交中...',
        vertical: true
      })
      setTimeout(() => {
        this.lyfHideLoading()
      }, 3000)
    },
  }
}
</script>