# Loading ## 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="loading" :absolute="absolute" :tip="tip" /> </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs, ref } from 'vue'; import { Loading } from '/@/components/Loading'; export default defineComponent({ components: { Loading }, setup() { 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); } return { openCompFullLoading, openCompAbsolute, ...toRefs(compState), }; }, }); </script> ``` ### Props | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | --- | --- | --- | --- | --- | | tip | `string` | - | - | 加載文本 | | size | `default, small , large` | `default` | - | 大小 | | absolute | `boolean` | false | - | 絕對定位，為 `false` 時可以全屏 | | loading | `boolean` | - | - | 當前加載狀態 | | background | `string` | - | - | 背景色 | | theme | `'dark' or 'light'` | `light` | - | 背景色主題，當背景色不為空時使用背景色 |