UI框架-通知組件

介紹

一個基于 Vue 3 的輕量級通知組件庫，提供了豐富的消息通知功能。支持多種通知類型、自定義樣式、進度條顯示等特性。

特性

• 🎨 支持多種通知類型：信息、成功、警告、錯誤
• ? 支持進度條顯示
• 🔄 支持加載中狀態
• ?? 可自定義顯示時長
• 🎯 支持手動關閉
• 💫 優雅的動畫效果
• 📱 響應式設計

安裝

npm install bbyh-ui-notifaction

使用方法

基礎用法

import { showNotification } from 'bbyh-ui-notifaction'// 顯示基礎通知
showNotification({type: 'info',title: '提示',message: '這是一條消息通知'
})

不同類型

// 成功提示
showNotification({type: 'success',title: '成功',message: '操作成功完成！',icon: '?'
})// 警告提示
showNotification({type: 'warning',title: '警告',message: '請注意這個警告信息！',icon: '??'
})// 錯誤提示
showNotification({type: 'error',title: '錯誤',message: '操作失敗，請重試！',icon: '?'
})

進度條

showNotification({type: 'info',title: '文件上傳中',message: '正在上傳文件，請勿關閉窗口...',progress: true,duration: 5000
})

加載中狀態

const notification = showNotification({type: 'info',title: '加載中',message: '正在處理，請稍候...',loading: true,duration: 0
})// 手動關閉
setTimeout(() => {notification.close()
}, 3000)

API

Options

參數	說明	類型	默認值
type	通知類型	‘info’ | ‘success’ | ‘warning’ | ‘error’	‘info’
title	標題	string	-
message	消息內容	string	-
duration	顯示時間(毫秒)，設為 0 則不會自動關閉	number	4500
icon	自定義圖標	string	null
progress	是否顯示進度條	boolean	false
loading	是否顯示加載動畫	boolean	false
controlProgress	是否手動控制進度	boolean	false
progressValue	進度條初始值	number	100

方法

方法名	說明	參數
close	關閉當前通知	-
setProgress	設置進度條值	value: number

源碼下載

UI框架-通知組件

npm倉庫

UI框架-通知組件

核心代碼

code/src/components/Notification.vue

<template><div class="ui-notification" :class="['ui-notification--' + type, { 'is-closing': closing }]" ref="notification"><div class="ui-notification__icon"><span v-if="icon">{{ icon }}</span><span v-else-if="loading" class="ui-notification__loading"></span></div><div class="ui-notification__content"><h4 class="ui-notification__title">{{ title }}</h4><p class="ui-notification__message">{{ message }}</p></div><span class="ui-notification__close" @click="close">×</span><div v-if="progress" class="ui-notification__progress" :style="{ width: progressWidth + '%' }"></div></div>
</template><script setup>
import {defineExpose, defineProps, onMounted, ref} from "vue";const props = defineProps({type: {type: String,default: "info",},title: {type: String,required: true,},message: {type: String,required: true,},icon: {type: String,default: null,},duration: {type: Number,default: 4500,},progress: {type: Boolean,default: false,},controlProgress: {type: Boolean,default: false,},progressValue: {type: Number,default: 100,},loading: {type: Boolean,default: false,},
});const notification = ref();
const closing = ref(false);
const progressWidth = ref(props.progressValue);onMounted(() => {if (props.controlProgress) {if (props.progress) {if (props.duration > 0) {const interval = setInterval(() => {progressWidth.value -= 1;if (progressWidth.value <= 0) {clearInterval(interval);}}, props.duration / 100);}}} else {if (props.duration > 0) {setTimeout(() => close(), props.duration);}if (props.progress) {const interval = setInterval(() => {progressWidth.value -= 1;if (progressWidth.value <= 0) {clearInterval(interval);close();}}, props.duration / 100);}}
});function close() {closing.value = true;setTimeout(() => {notification.value.parentElement.remove();}, 300);
}function setProgress(value) {progressWidth.value = value;
}defineExpose({close,setProgress
});
</script><style>
/* 定義根變量 */
:root {/* 主題色 */--primary-color: #409eff;--success-color: #67c23a;--warning-color: #e6a23c;--danger-color: #f56c6c;--info-color: #909399;--error-color: #f56c6c;/* 文字顏色 */--text-primary: #303133;--text-regular: #606266;--text-secondary: #909399;--text-placeholder: #c0c4cc;/* 邊框顏色 */--border-color: #dcdfe6;--border-light: #e4e7ed;--border-lighter: #ebeef5;/* 背景顏色 */--background-color: #ffffff;--background-hover: #f5f7fa;/* 字體大小 */--font-size-large: 18px;--font-size-medium: 16px;--font-size-base: 14px;--font-size-small: 13px;--font-size-mini: 12px;/* 邊框圓角 */--border-radius-base: 4px;--border-radius-small: 2px;--border-radius-round: 20px;--border-radius-circle: 100%;
}/* 通知容器 */
.ui-notification-container {position: fixed;z-index: 9999;display: flex;flex-direction: column;gap: 12px;padding: 16px;
}.ui-notification-container--top-right {top: 0;right: 0;
}.ui-notification-container--top-left {top: 0;left: 0;
}.ui-notification-container--bottom-right {bottom: 0;right: 0;
}.ui-notification-container--bottom-left {bottom: 0;left: 0;
}/* 通知項 */
.ui-notification {min-width: 300px;max-width: 400px;padding: 16px;border-radius: var(--border-radius-base);background-color: var(--background-color);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);display: flex;align-items: flex-start;position: relative;animation: notification-in 0.3s ease-out;
}.ui-notification.is-closing {animation: notification-out 0.3s ease-in forwards;
}/* 通知類型樣式 */
.ui-notification--info {border-left: 4px solid var(--primary-color);
}.ui-notification--success {border-left: 4px solid var(--success-color);
}.ui-notification--warning {border-left: 4px solid var(--warning-color);
}.ui-notification--error {border-left: 4px solid var(--error-color);
}/* 通知圖標 */
.ui-notification__icon {margin-right: 16px;font-size: 24px;
}.ui-notification--info .ui-notification__icon {color: var(--primary-color);
}.ui-notification--success .ui-notification__icon {color: var(--success-color);
}.ui-notification--warning .ui-notification__icon {color: var(--warning-color);
}.ui-notification--error .ui-notification__icon {color: var(--error-color);
}/* 通知內容 */
.ui-notification__content {flex: 1;
}.ui-notification__title {font-size: var(--font-size-large);font-weight: 500;margin: 0 0 8px;color: var(--text-primary);
}.ui-notification__message {font-size: var(--font-size-base);color: var(--text-regular);margin: 0;
}/* 關閉按鈕 */
.ui-notification__close {position: absolute;top: 16px;right: 16px;font-size: 16px;color: var(--text-secondary);cursor: pointer;transition: color 0.3s;
}.ui-notification__close:hover {color: var(--text-regular);
}/* 進度條 */
.ui-notification__progress {position: absolute;bottom: 0;left: 0;height: 2px;background-color: var(--primary-color);transition: width 0.3s linear;
}/* 動畫 */
@keyframes notification-in {from {transform: translateX(100%);opacity: 0;}to {transform: translateX(0);opacity: 1;}
}@keyframes notification-out {from {transform: translateX(0);opacity: 1;}to {transform: translateX(100%);opacity: 0;}
}/* 加載中動畫 */
.ui-notification__loading {display: inline-block;width: 24px;height: 24px;border: 2px solid currentColor;border-top-color: transparent;border-radius: 50%;animation: notification-loading 0.8s infinite linear;
}@keyframes notification-loading {to {transform: rotate(360deg);}
}
</style>

code/src/components/NotificationManager.js

import {createApp} from "vue";
import Notification from "./Notification.vue";let container;function getContainer() {if (!container) {container = document.createElement("div");container.className = "ui-notification-container ui-notification-container--top-right";document.body.appendChild(container);}return container;
}export function showNotification(options) {const app = createApp(Notification, options);const wrapper = document.createElement("div");app.mount(wrapper);getContainer().appendChild(wrapper);return app._instance.exposed;
}

效果展示

示例頁面

普通消息提示

加載消息提示

進度消息提示