UI框架-通知组件

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

方法

源码下载

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;
}

效果展示

示例页面

普通消息提示

加载消息提示

进度消息提示