122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
|
<script setup>
|
||
|
|
import error from '../images/error.png'
|
||
|
|
import success from '../images/success.png'
|
||
|
|
import warning from '../images/warning.png'
|
||
|
|
import info from '../images/info.png'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'success'
|
||
|
|
},
|
||
|
|
message: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({
|
||
|
|
text: '',
|
||
|
|
color: '',
|
||
|
|
align: 'left'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
subTitle: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({
|
||
|
|
text: '',
|
||
|
|
color: '',
|
||
|
|
align: 'left'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
showIcon: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const typeConfig = {
|
||
|
|
info: {
|
||
|
|
imgSrc: info,
|
||
|
|
borderColor: '#C6DFFB',
|
||
|
|
bgColor: '#ECF5FE',
|
||
|
|
},
|
||
|
|
success: {
|
||
|
|
imgSrc: success,
|
||
|
|
borderColor: '#C5E7D5',
|
||
|
|
bgColor: '#EDF7F2',
|
||
|
|
},
|
||
|
|
error: {
|
||
|
|
imgSrc: error,
|
||
|
|
borderColor: '#FFD4D4',
|
||
|
|
bgColor: '#FFF0F0',
|
||
|
|
},
|
||
|
|
warning: {
|
||
|
|
imgSrc: warning,
|
||
|
|
borderColor: '#FFE2BA',
|
||
|
|
bgColor: '#FFF7EC',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 修正计算属性，使用 props.style
|
||
|
|
const finalStyle = computed(() => {
|
||
|
|
return {
|
||
|
|
borderColor: props.style?.borderColor || typeConfig[props.type].borderColor,
|
||
|
|
backgroundColor: props.style?.backgroundColor || typeConfig[props.type].bgColor,
|
||
|
|
width: props.style?.width || '343px',
|
||
|
|
height: props.style?.height || 'auto',
|
||
|
|
minHeight: '46px',
|
||
|
|
...props.style
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
:class="`box-border flex items-center border rounded-[4px] px-[15px] shadow-sm py-8px ${!message?'justify-center':''}`"
|
||
|
|
:style="finalStyle"
|
||
|
|
>
|
||
|
|
<div v-if="showIcon" class="mr-[12px]">
|
||
|
|
<img
|
||
|
|
:src="typeConfig[type].imgSrc"
|
||
|
|
class="w-20px h-20px"
|
||
|
|
style="object-fit: contain"
|
||
|
|
alt=""
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col justify-center">
|
||
|
|
<!-- 如果是简单文本模式 -->
|
||
|
|
<div v-if="message" class="text-[14px] line-height-none">
|
||
|
|
{{ message }}
|
||
|
|
</div>
|
||
|
|
<!-- 如果是标题+副标题模式 -->
|
||
|
|
<template v-else>
|
||
|
|
<div
|
||
|
|
v-if="title.text"
|
||
|
|
class="text-[14px] line-height-20px"
|
||
|
|
:style="{
|
||
|
|
color: title.color || 'inherit',
|
||
|
|
textAlign: title.align || 'left'
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
{{ title.text }}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="subTitle.text"
|
||
|
|
class="text-[12px] leading-normal mt-1 line-height-17px"
|
||
|
|
:style="{
|
||
|
|
color: subTitle.color || '#939393',
|
||
|
|
textAlign: subTitle.align || 'left'
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
{{ subTitle.text }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|