From 6c5dd72f97a580382008bb6e01c679701abd82d4 Mon Sep 17 00:00:00 2001
From: Rodney Chen <rodney.chen@hotmail.com>
Date: 星期二, 18 六月 2024 21:16:05 +0800
Subject: [PATCH] 忽略internal
---
src/views/demo/comp/loading/index.vue | 158 ++++++++++++++++++++++++----------------------------
1 files changed, 74 insertions(+), 84 deletions(-)
diff --git a/src/views/demo/comp/loading/index.vue b/src/views/demo/comp/loading/index.vue
index 351277f..efae9a4 100644
--- a/src/views/demo/comp/loading/index.vue
+++ b/src/views/demo/comp/loading/index.vue
@@ -1,113 +1,103 @@
<template>
<PageWrapper v-loading="loadingRef" loading-tip="鍔犺浇涓�..." title="Loading缁勪欢绀轰緥">
<div ref="wrapEl">
- <a-alert message="缁勪欢鏂瑰紡" />
+ <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"
+ :loading="compState.loading"
+ :absolute="compState.absolute"
+ :theme="compState.theme"
+ :background="compState.background"
+ :tip="compState.tip"
/>
- <a-alert message="鍑芥暟鏂瑰紡" />
+ <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="鎸囦护鏂瑰紡" />
+ <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';
+<script lang="ts" setup>
+ import { reactive, 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 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 loadingRef = ref(false);
+ const compState = reactive<{
+ absolute?: boolean;
+ loading?: boolean;
+ theme?: 'dark' | 'light';
+ background?: string;
+ tip?: string;
+ }>({
+ 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),
- };
+ 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>
--
Gitblit v1.9.3