Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 t-loading 外部用 t-overlay 实现

Browse Source
This commit is contained in:
BTMuli
2023-05-25 22:37:21 +08:00
parent a398a5fac3
commit f1db614dee
1 changed files with 26 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/main/t-loading.vue
View File

@@ -1,34 +1,31 @@
<template> <template>
<transition enter-from-class="out-enter-from" name="out"> <TOverlay v-model="show">
<div v-show="showOut" class="loading-box"> <div class="loading-div">
<transition enter-from-class="in-enter-from" name="in"> <div class="loading-content">
<div v-show="showIn" class="loading-div"> <div class="loading-title">
<div class="loading-content"> {{ title }}
<div class="loading-title"> <v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
{{ title }}
<v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
</div>
<div v-if="subtitle !== ''" class="loading-subtitle">
{{ subtitle }}
</div>
<div v-if="!empty" class="loading-img">
<img src="/source/UI/loading.webp" alt="loading">
</div>
<div v-else class="loading-img">
<img src="/source/UI/empty.webp" alt="empty">
</div>
<div v-if="content !== ''" class="loading-text">
{{ content }}
</div>
</div>
</div> </div>
</transition> <div v-if="subtitle !== ''" class="loading-subtitle">
{{ subtitle }}
</div>
<div v-if="!empty" class="loading-img">
<img src="/source/UI/loading.webp" alt="loading">
</div>
<div v-else class="loading-img">
<img src="/source/UI/empty.webp" alt="empty">
</div>
<div v-if="content !== ''" class="loading-text">
{{ content }}
</div>
</div>
</div> </div>
</transition> </TOverlay>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { ref, watch } from "vue"; import { watch, ref } from "vue";
import TOverlay from "./t-overlay.vue";
interface LoadingProps { interface LoadingProps {
modelValue: boolean; modelValue: boolean;
@@ -38,8 +35,7 @@ interface LoadingProps {
empty?: boolean; empty?: boolean;
} }
const showOut = ref(false); const show = ref(false);
const showIn = ref(false);
const props = withDefaults(defineProps<LoadingProps>(), { const props = withDefaults(defineProps<LoadingProps>(), {
modelValue: false, modelValue: false,
@@ -49,79 +45,11 @@ const props = withDefaults(defineProps<LoadingProps>(), {
empty: false, empty: false,
}); });
watch( watch(() => props.modelValue, (v) => {
() => props.modelValue, show.value = v;
(v) => { });
if (v) {
showOut.value = true;
showIn.value = true;
} else {
setTimeout(() => {
showIn.value = false;
}, 100);
setTimeout(() => {
showOut.value = false;
}, 300);
}
},
);
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.out-enter-active,
.out-leave-active,
.in-enter-active {
transition: all 0.3s;
}
.in-leave-active {
transition: all 0.5s ease-in-out;
}
.out-enter-from,
.in-enter-from {
opacity: 0;
transform: scale(1.5);
}
.out-enter-to,
.in-enter-to {
opacity: 1;
transform: scale(1);
}
.out-leave-from {
opacity: 1;
}
.out-leave-to {
opacity: 0;
}
.in-leave-from {
opacity: 1;
transform: scale(1);
}
.in-leave-to {
opacity: 0;
transform: scale(0);
}
.loading-box {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
backdrop-filter: blur(20px);
z-index: 100;
}
.loading-div { .loading-div {
display: flex; display: flex;
width: 50%; width: 50%;