feat: 封装全屏加载
This commit is contained in:
parent
0c3ea2dc86
commit
f2912f64fc
@ -9,4 +9,3 @@ export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, use
|
||||
|
||||
export * from './use-signal';
|
||||
export * from './use-table';
|
||||
export type { LoadingApiInst } from './use-loading';
|
||||
|
@ -1,12 +1,5 @@
|
||||
import type { Ref } from 'vue';
|
||||
import useBoolean from './use-boolean';
|
||||
|
||||
export interface LoadingApiInst {
|
||||
loading: Ref<boolean>;
|
||||
startLoading: () => void;
|
||||
endLoading: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading
|
||||
*
|
||||
|
@ -1,13 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { createTextVNode, defineComponent } from 'vue';
|
||||
import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import useContentLoading from '@/hooks/common/loading';
|
||||
|
||||
defineOptions({
|
||||
name: 'AppProvider'
|
||||
});
|
||||
|
||||
const loading = useLoading(false);
|
||||
const contentLoading = useContentLoading();
|
||||
|
||||
const ContextHolder = defineComponent({
|
||||
name: 'ContextHolder',
|
||||
@ -17,7 +17,7 @@ const ContextHolder = defineComponent({
|
||||
window.$dialog = useDialog();
|
||||
window.$message = useMessage();
|
||||
window.$notification = useNotification();
|
||||
window.$loading = loading;
|
||||
window.$loading = contentLoading;
|
||||
}
|
||||
|
||||
register();
|
||||
@ -28,7 +28,13 @@ const ContextHolder = defineComponent({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin class="h-full" content-class="h-full" :show="loading.loading.value">
|
||||
<NSpin
|
||||
class="h-full"
|
||||
:size="52"
|
||||
content-class="h-full"
|
||||
:show="contentLoading.loading.value"
|
||||
:description="contentLoading.description.value"
|
||||
>
|
||||
<NLoadingBarProvider>
|
||||
<NDialogProvider>
|
||||
<NNotificationProvider>
|
||||
@ -42,4 +48,9 @@ const ContextHolder = defineComponent({
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
:deep(.n-spin-description) {
|
||||
margin-top: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
@ -25,7 +25,7 @@ export function useDownload() {
|
||||
}
|
||||
|
||||
function download(url: string, params: any, fileName: string) {
|
||||
window.$loading?.startLoading();
|
||||
window.$loading?.startLoading('正在下载数据,请稍候...');
|
||||
const token = localStg.get('token');
|
||||
const clientId = import.meta.env.VITE_APP_CLIENT_ID;
|
||||
const now = new Date().getTime();
|
||||
@ -54,7 +54,7 @@ export function useDownload() {
|
||||
}
|
||||
|
||||
function oss(ossId: CommonType.IdType) {
|
||||
window.$loading?.startLoading();
|
||||
window.$loading?.startLoading('正在下载数据,请稍候...');
|
||||
const token = localStg.get('token');
|
||||
const clientId = import.meta.env.VITE_APP_CLIENT_ID;
|
||||
const url = `/resource/oss/download/${ossId}`;
|
||||
@ -77,7 +77,7 @@ export function useDownload() {
|
||||
}
|
||||
|
||||
function zip(url: string, fileName: string) {
|
||||
window.$loading?.startLoading();
|
||||
window.$loading?.startLoading('正在下载数据,请稍候...');
|
||||
const token = localStg.get('token');
|
||||
const clientId = import.meta.env.VITE_APP_CLIENT_ID;
|
||||
const now = new Date().getTime();
|
||||
|
25
src/hooks/common/loading.ts
Normal file
25
src/hooks/common/loading.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { ref } from 'vue';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
|
||||
/** Content Loading */
|
||||
export default function useContentLoading() {
|
||||
const description = ref<string>('loading...');
|
||||
const loading = useLoading();
|
||||
|
||||
function startLoading(desc: string = 'loading...') {
|
||||
description.value = desc;
|
||||
loading.startLoading();
|
||||
}
|
||||
|
||||
function endLoading() {
|
||||
description.value = 'loading...';
|
||||
loading.endLoading();
|
||||
}
|
||||
|
||||
return {
|
||||
loading: loading.loading,
|
||||
description,
|
||||
startLoading,
|
||||
endLoading
|
||||
};
|
||||
}
|
7
src/typings/global.d.ts
vendored
7
src/typings/global.d.ts
vendored
@ -13,7 +13,12 @@ declare global {
|
||||
/** Notification instance */
|
||||
$notification?: import('naive-ui').NotificationProviderInst;
|
||||
/** Content loading */
|
||||
$loading?: import('@sa/hooks').LoadingApiInst;
|
||||
$loading?: {
|
||||
loading: import('vue').Ref<boolean>;
|
||||
description: import('vue').Ref<string>;
|
||||
startLoading: (description?: string) => void;
|
||||
endLoading: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
interface ViewTransition {
|
||||
|
Loading…
Reference in New Issue
Block a user