<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>
|
