可自定义设置以下属性：
全局通知提醒标题（message），优先级低于 Notification 中的 message，类型：string，默认 '温馨提示'
自动关闭的延时时长（duration），单位 ms；设置 null 时，不自动关闭，类型：number | null，默认 4500
消息从顶部弹出时，距离顶部的位置（top），单位 px，类型：number，默认 24
消息从底部弹出时，距离底部的位置（bottom），单位 px，类型：number，默认 24
消息弹出位置（placement），优先级低于 Notification 中的 placement，类型：'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'，默认 'topRight'
其中调用时传入的 Notification 参数类型：
通知提醒标题（message），类型：string
通知提醒内容（description），类型：string，必传
通知提醒框弹出位置（placement），类型：'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
调用时可选以下五个方法对应五种不同样式：
- notification.value.open(notification: Notification) // 默认使用
- notification.value.info(notification: Notification) // info调用
- notification.value.success(notification: Notification) // success调用
- notification.value.error(notification: Notification) // error调用
- notification.value.warn(notification: Notification) // warn调用
五种样式效果如下图：在线预览
notification.value.open()调用：
notification.value.info()调用：
notification.value.success()调用：
notification.value.warning()调用：
notification.value.error()调用：
①创建通知提醒组件Notification.vue：
<script setup lang="ts">
import { ref, computed, watch, watchEffect, nextTick } from 'vue'
import { rafTimeout, cancelRaf } from '../utils'
interface Props {
message?: string // 全局通知提醒标题，优先级低于 Notification 中的 message
duration?: number | null // 自动关闭的延时时长，单位 ms；设置 null 时，不自动关闭
top?: number // 消息从顶部弹出时，距离顶部的位置，单位 px
bottom?: number // 消息从底部弹出时，距离底部的位置，单位 px
placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' // 消息弹出位置，优先级低于 Notification 中的 placement
}
const props = withDefaults(defineProps<Props>(), {
message: '温馨提示',
duration: 4500,
top: 24,
bottom: 24,
placement: 'topRight'
})
interface Notification {
message?: string // 通知提醒标题
description: string // 通知提醒内容
placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' // 通知提醒弹出位置
}
const resetTimer = ref()
const hideIndex = ref<number[]>([])
const hideTimers = ref<any[]>([])
const notificationData = ref<any[]>([])
const place = ref()
const notification = ref()
const topStyle = computed(() => {
if (['topRight', 'topLeft'].includes(place.value)) {
return {
top: props.top + 'px'
}
}
return {}
})
const bottomStyle = computed(() => {
if (['bottomRight', 'bottomLeft'].includes(place.value)) {
return {
bottom: props.bottom + 'px'
}
}
return {}
})
const clear = computed(() => {
// 所有提示是否已经全部变为 false
return hideIndex.value.length === notificationData.value.length
})
watch(clear, (to, from) => {
// 所有提示都消失后重置
if (!from && to) {
resetTimer.value = rafTimeout(() => {
hideIndex.value.splice(0)
notificationData.value.splice(0)
}, 300)
}
})
watchEffect(() => {
place.value = props.placement
})
function onEnter(index: number) {
hideTimers.value[index] && cancelRaf(hideTimers.value[index])
hideTimers.value[index] = null
}
function onLeave(index: number) {
if (props.duration) {
hideTimers.value[index] = rafTimeout(() => {
onClose(index)
}, props.duration)
}
}
function show() {
resetTimer.value && cancelRaf(resetTimer.value)
hideTimers.value.push(null)
const index = notificationData.value.length - 1
nextTick(() => {
notification.value[index].style.height = notification.value[index].offsetHeight + 'px'
notification.value[index].style.opacity = 1
})
if (notificationData.value[index].placement) {
place.value = notificationData.value[index].placement
}
if (props.duration) {
hideTimers.value[index] = rafTimeout(() => {
onClose(index)
}, props.duration)
}
}
function open(data: Notification) {
notificationData.value.push({
...data,
mode: 'open'
})
show()
}
function info(data: Notification) {
notificationData.value.push({
...data,
mode: 'info'
})
show()
}
function success(data: Notification) {
notificationData.value.push({
...data,
mode: 'success'
})
show()
}
function error(data: Notification) {
notificationData.value.push({
...data,
mode: 'error'
})
show()
}
function warning(data: Notification) {
notificationData.value.push({
...data,
mode: 'warning'
})
show()
}
defineExpose({
open,
info,
success,
error,
warning
})
const emit = defineEmits(['close'])
function onClose(index: number) {
hideIndex.value.push(index)
emit('close')
}
</script>
<template>
<div class="m-notification-wrap" :class="`notification-${place}`" :style="{ ...topStyle, ...bottomStyle }">
<TransitionGroup :name="['topRight', 'bottomRight'].includes(place) ? 'right' : 'left'">
<div
v-show="!hideIndex.includes(index)"
ref="notification"
class="m-notification"
v-for="(data, index) in notificationData"
:key="index"
@mouseenter="onEnter(index)"
@mouseleave="onLeave(index)"
>
<div class="m-notification-content">
<svg
v-if="data.mode === 'info'"
class="icon-svg icon-info"
viewBox="64 64 896 896"
data-icon="info-circle"
aria-hidden="true"
focusable="false"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
></path>
<path
d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
></path>
</svg>
<svg
v-if="data.mode === 'success'"
class="icon-svg icon-success"
viewBox="64 64 896 896"
data-icon="check-circle"
aria-hidden="true"
focusable="false"
>
<path
d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
></path>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
></path>
</svg>
<svg
v-if="data.mode === 'warning'"
class="icon-svg icon-warning"
viewBox="64 64 896 896"
data-icon="exclamation-circle"
aria-hidden="true"
focusable="false"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
></path>
<path
d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
></path>
</svg>
<svg
v-if="data.mode === 'error'"
class="icon-svg icon-error"
viewBox="64 64 896 896"
data-icon="close-circle"
aria-hidden="true"
focusable="false"
>
<path
d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
></path>
<path
d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
></path>
</svg>
<div :class="['notification-title', { mb4: data.mode !== 'open', ml36: data.mode !== 'open' }]">
{
{ data.message || message }}
</div>
<p :class="['notification-description', { ml36: data.mode !== 'open' }]">{
{ data.description || '--' }}</p>
<svg
class="close-svg"
viewBox="64 64 896 896"
data-icon="close"
aria-hidden="true"
focusable="false"
@click="onClose(index)"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
></path>
</svg>
</div>
</div>
</TransitionGroup>
</div>
</template>
<style lang="less" scoped>
.right-move, // 对移动中的元素应用的过渡
.right-enter-active,
.right-leave-active,
.left-move,
.left-enter-active,
.left-leave-active {
transition: all 0.2s;
}
.right-enter-from {
transform: translateX(100%);
opacity: 0;
}
.right-leave-to,
.left-leave-to {
height: 0 !important;
opacity: 0 !important;
}
/* 确保将离开的元素从布局流中删除
以便能够正确地计算移动的动画。 */
.right-leave-active {
position: absolute;
right: 0;
}
.left-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.left-leave-active {
position: absolute;
left: 0;
}
.m-notification-wrap {
position: fixed;
z-index: 999; // 突出显示该层级
color: rgba(0, 0, 0, 0.88);
font-size: 14px;
line-height: 1.5714285714285714;
margin-inline-end: 24px;
.m-notification {
overflow: hidden;
margin-bottom: 16px;
background: #fff;
border-radius: 8px;
box-shadow:
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
.m-notification-content {
position: relative;
width: 384px;
max-width: calc(100vw - 48px);
margin-inline-start: auto;
padding: 20px 24px;
line-height: 1.5714285714285714;
word-break: break-all;
.icon-svg {
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
}
.icon-info {
fill: @themeColor;
}
.icon-success {
fill: #52c41a;
}
.icon-warning {
fill: #faad14;
}
.icon-error {
fill: #ff4d4f;
}
.notification-title {
padding-right: 24px;
margin-bottom: 8px;
font-size: 16px;
color: rgba(0, 0, 0, 0.88);
line-height: 1.5;
}
.notification-description {
font-size: 14px;
}
.mb4 {
margin-bottom: 4px;
}
.ml36 {
margin-left: 36px;
}
.close-svg {
display: inline-block;
position: absolute;
top: 25px;
right: 24px;
width: 14px;
height: 14px;
fill: rgba(0, 0, 0, 0.45);
cursor: pointer;
transition: fill 0.3s;
&:hover {
fill: rgba(0, 0, 0, 0.75);
}
}
}
}
}
.notification-topRight,
.notification-bottomRight {
margin-right: 24px;
right: 0;
}
.notification-topLeft,
.notification-bottomLeft {
margin-left: 24px;
left: 0;
}
</style>
②在要使用的页面引入：
<script setup lang="ts">
import Notification from './Notification.vue'
import { ref } from 'vue'
const notification = ref()
function onOpen(info: string) {
notification.value.open({
message: 'Notification Title',
description: info
}) // 默认使用
}
function onInfo(info: string) {
notification.value.info({
message: 'Notification Title',
description: info
}) // info调用
}
function onSuccess(info: string) {
notification.value.success({
message: 'Notification Title',
description: info
}) // success调用
}
function onWarning(info: string) {
notification.value.warning({
message: 'Notification Title',
description: info
}) // warning调用
}
function onError(info: string) {
notification.value.error({
message: 'Notification Title',
description: info
}) // error调用
}
function onOpenPlacement(place: string) {
notification.value.info({
message: 'Notification Title',
description: 'This is the content of the notification.',
placement: place
})
}
function onClose() {
// 点击默认关闭按钮时触发的回调函数
console.log('关闭notification')
}
</script>
<template>
<div>
<h1>{
{ $route.name }} {
{ $route.meta.title }}</h1>
<h2 class="mt30 mb10">基本使用</h2>
<Space gap="large">
<Button type="primary" @click="onOpen('This is a normal notification')">Open</Button>
<Button type="primary" @click="onInfo('This is a normal notification')">Info</Button>
<Button type="primary" @click="onSuccess('This is a success notification')">Success</Button>
<Button type="primary" @click="onWarning('This is a warning notification')">Warning</Button>
<Button type="primary" @click="onError('This is a error notification')">Error</Button>
</Space>
<h2 class="mt30 mb10">位置</h2>
<Space gap="large">
<Button type="primary" @click="onOpenPlacement('topLeft')">topLeft</Button>
<Button type="primary" @click="onOpenPlacement('topRight')">topRight</Button>
<Button type="primary" @click="onOpenPlacement('bottomLeft')">bottomLeft</Button>
<Button type="primary" @click="onOpenPlacement('bottomRight')">bottomRight</Button>
</Space>
<Notification ref="notification" placement="topRight" :duration="3000" :top="24" @close="onClose" />
</div>
</template>
