2020-08-17 22:23:45 +08:00
|
|
|
<template>
|
2022-02-08 09:09:54 +08:00
|
|
|
<transition :name="ns.b('fade')">
|
2020-08-17 22:23:45 +08:00
|
|
|
<div
|
|
|
|
v-show="visible"
|
2022-01-19 15:04:01 +08:00
|
|
|
:class="[ns.b(), ns.m(type), ns.is('center', center), ns.is(effect)]"
|
2020-08-17 22:23:45 +08:00
|
|
|
role="alert"
|
|
|
|
>
|
2022-05-29 09:42:31 +08:00
|
|
|
<el-icon v-if="showIcon && iconComponent" :class="iconClass">
|
2021-10-27 23:17:13 +08:00
|
|
|
<component :is="iconComponent" />
|
|
|
|
</el-icon>
|
2022-05-29 09:42:31 +08:00
|
|
|
|
2022-01-19 10:26:31 +08:00
|
|
|
<div :class="ns.e('content')">
|
2021-09-04 19:29:28 +08:00
|
|
|
<span
|
|
|
|
v-if="title || $slots.title"
|
2022-01-19 10:26:31 +08:00
|
|
|
:class="[ns.e('title'), isBoldTitle]"
|
2021-09-04 19:29:28 +08:00
|
|
|
>
|
2020-08-17 22:23:45 +08:00
|
|
|
<slot name="title">{{ title }}</slot>
|
|
|
|
</span>
|
2022-01-19 10:26:31 +08:00
|
|
|
<p v-if="$slots.default || description" :class="ns.e('description')">
|
2020-08-17 22:23:45 +08:00
|
|
|
<slot>
|
|
|
|
{{ description }}
|
|
|
|
</slot>
|
|
|
|
</p>
|
2021-10-27 23:17:13 +08:00
|
|
|
<template v-if="closable">
|
|
|
|
<div
|
|
|
|
v-if="closeText"
|
2022-02-11 23:37:50 +08:00
|
|
|
:class="[ns.e('close-btn'), ns.is('customed')]"
|
2021-10-27 23:17:13 +08:00
|
|
|
@click="close"
|
|
|
|
>
|
|
|
|
{{ closeText }}
|
|
|
|
</div>
|
2022-02-11 23:37:50 +08:00
|
|
|
<el-icon v-else :class="ns.e('close-btn')" @click="close">
|
2022-02-17 10:48:05 +08:00
|
|
|
<Close />
|
2021-10-27 23:17:13 +08:00
|
|
|
</el-icon>
|
|
|
|
</template>
|
2020-08-17 22:23:45 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</transition>
|
|
|
|
</template>
|
2022-02-17 10:48:05 +08:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { computed, ref, useSlots } from 'vue'
|
2021-10-27 23:17:13 +08:00
|
|
|
import { ElIcon } from '@element-plus/components/icon'
|
2022-02-11 11:03:15 +08:00
|
|
|
import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
|
2022-01-19 10:26:31 +08:00
|
|
|
import { useNamespace } from '@element-plus/hooks'
|
2022-03-25 15:35:56 +08:00
|
|
|
import { alertEmits, alertProps } from './alert'
|
2020-08-17 22:23:45 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const { Close } = TypeComponents
|
2021-10-27 23:17:13 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
defineOptions({
|
|
|
|
name: 'ElAlert',
|
|
|
|
})
|
2021-09-13 10:48:10 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const props = defineProps(alertProps)
|
|
|
|
const emit = defineEmits(alertEmits)
|
|
|
|
const slots = useSlots()
|
2022-01-19 10:26:31 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const ns = useNamespace('alert')
|
2020-08-17 22:23:45 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const visible = ref(true)
|
2020-08-17 22:23:45 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const iconComponent = computed(
|
|
|
|
() => TypeComponentsMap[props.type] || TypeComponentsMap['info']
|
|
|
|
)
|
2022-05-29 09:42:31 +08:00
|
|
|
|
|
|
|
const iconClass = computed(() => [
|
|
|
|
ns.e('icon'),
|
|
|
|
{ [ns.is('big')]: !!props.description || !!slots.default },
|
|
|
|
])
|
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const isBoldTitle = computed(
|
|
|
|
() => props.description || { [ns.is('bold')]: slots.default }
|
|
|
|
)
|
2020-08-17 22:23:45 +08:00
|
|
|
|
2022-02-17 10:48:05 +08:00
|
|
|
const close = (evt: MouseEvent) => {
|
|
|
|
visible.value = false
|
|
|
|
emit('close', evt)
|
|
|
|
}
|
2020-08-17 22:23:45 +08:00
|
|
|
</script>
|