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

💄 snackbar 样式调整

Browse Source
This commit is contained in:
BTMuli
2023-10-17 00:43:23 +08:00
parent 7b76432b1e
commit f7b60fb218
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/func/snackbar.vue
View File

@@ -1,14 +1,16 @@
<template> <template>
<transition name="func-snackbar"> <div class="func-snackbar-container">
<div v-show="show" class="func-snackbar" :style="{ backgroundColor: data.color }"> <transition name="func-snackbar">
<slot name="text"> <div v-show="show" class="func-snackbar" :style="{ backgroundColor: data.color }">
<span class="func-snackbar-text">{{ data.text }}</span> <slot name="text">
</slot> <span class="func-snackbar-text">{{ data.text }}</span>
</div> </slot>
</transition> </div>
</transition>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"; import { onMounted, reactive, ref } from "vue";
interface SnackbarProps { interface SnackbarProps {
text: string; text: string;
@@ -40,15 +42,13 @@ function transColor(color: string): string {
} }
switch (color) { switch (color) {
case "success": case "success":
return "#41b883"; return "#7ebd21";
case "error": case "error":
return "#ff4d4f"; return "#e63f5a";
case "warn": case "warn":
return "#faad14"; return "#ecb349";
case "info":
return "#1890ff";
case "cancel": case "cancel":
return "#ABB2BF"; return "#cdcbc4";
default: default:
return color; return color;
} }
@@ -78,20 +78,28 @@ defineExpose({
.func-snackbar-enter-from, .func-snackbar-enter-from,
.func-snackbar-leave-to { .func-snackbar-leave-to {
opacity: 0; opacity: 0;
transform: translateX(-50%) translateY(20px); transform: translateY(20px);
} }
.func-snackbar-enter-to, .func-snackbar-enter-to,
.func-snackbar-leave-from { .func-snackbar-leave-from {
opacity: 1; opacity: 1;
transform: translateX(-50%) translateY(0); transform: translateY(0);
}
.func-snackbar-container {
position: absolute;
z-index: 999;
bottom: 0;
left: 0;
display: flex;
width: 100%;
height: 80px;
align-items: center;
justify-content: center;
} }
.func-snackbar { .func-snackbar {
position: fixed;
z-index: 999;
bottom: 20px;
left: 50%;
display: flex; display: flex;
min-width: 200px; min-width: 200px;
height: 40px; height: 40px;
@@ -99,8 +107,8 @@ defineExpose({
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
margin: 20px;
box-shadow: 0 0 10px rgb(0 0 0 / 20%); box-shadow: 0 0 10px rgb(0 0 0 / 20%);
transform: translateX(-50%);
} }
.func-snackbar-text { .func-snackbar-text {