You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.5 KiB
78 lines
1.5 KiB
<template>
|
|
<Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
|
|
<div v-if="isShowRef" class="message-container">
|
|
<div class="message-content" :style="style[type]">
|
|
<p class="text-tips">{{ text }}</p>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
interface Props {
|
|
text: string
|
|
type: 'warn' | 'error' | 'success'
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
text: '',
|
|
type: 'success'
|
|
})
|
|
|
|
const style = {
|
|
warn: {
|
|
color: '#F3AD44',
|
|
backgroundColor: 'rgb(253, 246, 236)',
|
|
borderColor: 'rgb(250, 236, 216)'
|
|
},
|
|
error: {
|
|
color: '#FF6666',
|
|
backgroundColor: 'rgb(254, 240, 240)',
|
|
borderColor: 'rgb(253, 226, 226)'
|
|
},
|
|
success: {
|
|
color: '#fff',
|
|
backgroundColor: 'rgba(38, 36, 36, 0.8)',
|
|
borderColor: 'transparent'
|
|
}
|
|
} // 控制动画
|
|
const isShowRef = ref(false)
|
|
onMounted(() => {
|
|
isShowRef.value = true
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.message-container {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
animation-duration: 0.3s;
|
|
}
|
|
.message-content {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 50%;
|
|
z-index: 9999;
|
|
min-width: 300px;
|
|
height: 50px;
|
|
padding: 0 25px;
|
|
color: #999;
|
|
background: #f5f5f5;
|
|
border: 1px solid #e4e4e4;
|
|
border-radius: 100px;
|
|
transform: translate3d(-50%, 0, 0);
|
|
line-height: 50px;
|
|
|
|
.text-tips {
|
|
font-size: 24px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
</style>
|
|
|