# Loading

## 代码演示

<CodePreview src="/doc-comp/loading" :height="420">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
    <div ref="wrapEl">
      <a-alert message="组件方式" />
      <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
        全屏 Loading
      </a-button>
      <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
      <Loading
        :loading="compState.loading"
        :absolute="compState.absolute"
        :theme="compState.theme"
        :background="compState.background"
        :tip="compState.tip"
      />

      <a-alert message="函数方式" />

      <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">
        全屏 Loading
      </a-button>
      <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>

      <a-alert message="指令方式" />
      <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
        打开指令Loading
      </a-button>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { Loading, PageWrapper, useLoading } from '@eciol/ant-ui';

  const wrapEl = ref<ElRef>(null);

  const loadingRef = ref(false);
  const compState = reactive({
    absolute: false,
    loading: false,
    theme: 'dark',
    background: 'rgba(111,111,111,.7)',
    tip: '加载中...',
  });
  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  });

  const [openWrapLoading, closeWrapLoading] = useLoading({
    target: wrapEl,
    props: {
      tip: '加载中...',
      absolute: true,
    },
  });

  function openLoading(absolute: boolean) {
    compState.absolute = absolute;
    compState.loading = true;
    setTimeout(() => {
      compState.loading = false;
    }, 2000);
  }

  function openCompFullLoading() {
    openLoading(false);
  }

  function openCompAbsolute() {
    openLoading(true);
  }

  function openFnFullLoading() {
    openFullLoading();

    setTimeout(() => {
      closeFullLoading();
    }, 2000);
  }

  function openFnWrapLoading() {
    openWrapLoading();

    setTimeout(() => {
      closeWrapLoading();
    }, 2000);
  }

  function openDirectiveLoading() {
    loadingRef.value = true;
    setTimeout(() => {
      loadingRef.value = false;
    }, 2000);
  }
</script>

```
</details>
</CodePreview>

## Usage

```vue
<template>
  <div class="p-5" ref="wrapEl" v-loading="loadingRef" loading-tip="加载中...">
    <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">全屏 Loading</a-button>
    <a-button class="my-4" type="primary" @click="openCompAbsolute">容器内 Loading</a-button>
    <Loading :loading="compState.loading" :absolute="compState.absolute" :tip="tip" />
  </div>
</template>
<script lang="ts" setup>
  import { Loading } from '@eciol/ant-ui';
  const compState = reactive({
    absolute: false,
    loading: false,
    tip: '加载中...',
  });

  function openLoading(absolute: boolean) {
    compState.absolute = absolute;
    compState.loading = true;
    setTimeout(() => {
      compState.loading = false;
    }, 2000);
  }

  function openCompFullLoading() {
    openLoading(false);
  }

  function openCompAbsolute() {
    openLoading(true);
  }
</script>
```

### Props

| 属性 | 类型 | 默认值 | 可选值 | 说明 |
| --- | --- | --- | --- | --- |
| tip | `string` | - | - | 加载文本 |
| size | `default, small , large` | `default` | - | 大小 |
| absolute | `boolean` | false | - | 绝对定位，为 `false` 时可以全屏 |
| loading | `boolean` | - | - | 当前加载状态 |
| background | `string` | - | - | 背景色 |
| theme | `'dark' or 'light'` | `light` | - | 背景色主题，当背景色不为空时使用背景色 |