<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="loading" :absolute="absolute" :theme="theme" :background="background" :tip="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"> import { defineComponent, reactive, toRefs, ref } from 'vue'; import { Loading, useLoading } from '/@/components/Loading'; import { PageWrapper } from '/@/components/Page'; import { Alert } from 'ant-design-vue'; export default defineComponent({ components: { Loading, PageWrapper, [Alert.name]: Alert }, setup() { 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); } return { openCompFullLoading, openFnFullLoading, openFnWrapLoading, openCompAbsolute, wrapEl, loadingRef, openDirectiveLoading, ...toRefs(compState), }; }, }); </script>