灵动岛 (Dynamic Island)

前端通知组件 | AI 工程化开发

一个轻量灵巧的 Vue3 弹窗通知组件，灵感源自灵动岛设计，支持多种通知类型、动画效果、拖拽定位和动态组件嵌入，零依赖、开箱即用。

演示截图

（部分截图，更多请查看：在线示例）

功能特性

• 🎨 灵动岛风格 UI 设计
• 🚀 全局通知系统，支持队列管理
• 🎯 多种通知类型（default、success、error、warning、info）
• 📦 支持嵌入动态组件
• 🎭 多种动画效果（fade、slide、zoom、bounce）
• 🔄 手动关闭、自动关闭和常驻模式
• 🖱️ 拖拽功能，localStorage 记忆位置，位置持久化
• 🔊 通知声音
• 🎨 自定义样式支持
• 🎯 Vue3 + TypeScript，原生CSS无额外依赖

💡 后续还会优化和功能更新...

安装

npm install vue3-dynamic-island

使用方法

全局安装

在 App.vue 中引入组件，然后使用Island调用API显示通知(参考下边的基本使用和API示例)

<script setup>
import { DynamicIsland, Island } from 'vue3-dynamic-island'
</script>

<template>
  <div id="app">
    <!-- 必须添加此组件才能显示通知 -->
    <DynamicIsland />
    <router-view />
  </div>
</template>

基本使用

<script setup>
// 只需要引入 Island
import { Island } from 'vue3-dynamic-island'

const showNotification = () => {
  Island.success('提示', '操作完成！')
}
</script>

<template>
  <div>
    <button @click="showNotification">显示通知</button>
  </div>
</template>

API

Island

直接导入使用的简化 API：

show(options)

Island.show({
  type: 'success',           // 'default' | 'success' | 'error' | 'warning' | 'info'
  title: '通知标题',
  subtitle: '可选副标题',
  icon: MyIconComponent,      // 可选自定义图标
  showIcon: true,             // 显示/隐藏图标
  showClose: true,            // 显示/隐藏关闭按钮
  duration: 3000,             // 自动关闭时长（毫秒）
  persistent: false,           // 不自动关闭
  animation: 'slide',          // 'fade' | 'slide' | 'zoom' | 'bounce'
  progress: 50,               // 进度值（0-100）
  showProgress: false,         // 显示进度条
  dynamicComponent: {          // 嵌入自定义组件
    component: MyComponent,
    props: {}
  },
  backgroundColor: '#ff0000',  // 自定义背景颜色
  textColor: '#ffffff',        // 自定义文字颜色
  soundEnabled: true,          // 启用声音
  memPosition: false,         // 记忆位置
  onClick: () => {},          // 点击回调
  onClose: () => {}           // 关闭回调
})

success(title, subtitle, options)

Island.success('成功', '操作完成！')

error(title, subtitle, options)

Island.error('错误', '操作失败！')

warning(title, subtitle, options)

Island.warning('警告', '请检查您的输入')

info(title, subtitle, options)

Island.info('信息', '您有 3 条新消息')

close(id)

通过 ID 关闭特定通知。

const notificationId = Island.show({ title: '提示' })
Island.close(notificationId)

closeAll()

关闭所有通知。

Island.closeAll()

clearQueue()

清空通知队列。

Island.clearQueue()

示例

嵌入动态组件

<script setup>
import { Island } from 'vue3-dynamic-island'
import MyForm from './MyForm.vue'

const showForm = () => {
  Island.show({
    type: 'info',
    title: '用户表单',
    subtitle: '请填写您的信息',
    persistent: true,
    dynamicComponent: {
      component: MyForm,
      props: {
        onSubmit: (data) => {
          console.log('表单提交:', data)
          Island.closeAll()
        }
      }
    }
  })
}
</script>

自定义样式

Island.show({
  title: '自定义样式',
  subtitle: '渐变背景',
  backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  textColor: '#ffffff'
})

进度条

const notificationId = Island.show({
  type: 'info',
  title: '处理中',
  subtitle: '请稍候...',
  showProgress: true,
  progress: 0,
  persistent: true
})

// 模拟进度
let progress = 0
const interval = setInterval(() => {
  progress += 10
  Island.updateProgress(notificationId, progress)
  
  if (progress >= 100) {
    clearInterval(interval)
    Island.close(notificationId)
    Island.success('完成', '操作已完成！')
  }
}, 500)

拖拽功能

• 点击并拖拽通知的头部区域
• 位置会自动保存到 localStorage
• 组件会保持在视口边界内
• 距离屏幕边缘有 12px 的安全边距

浏览器支持

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

许可证

MIT

作者

piapia_

致谢

本项目是作者在 Trae CN AI 支持下共同完成。