@composy/notification-vue

@composy/notification-vue

LDesign 通知系统 - 统一导出 core 和 vue 子包（Vue 3 适配层）

功能特性

• 🧩 Vue 3 组件
• 🪝 组合式函数 (Composables)
• ⚡ 响应式数据绑定

安装

npm install @composy/notification-vue @composy/color-vue @composy/size-vue

快速开始

import { createColorPlugin } from '@composy/color-vue'
import { createNotificationPlugin } from '@composy/notification-vue'
import { createSizePlugin } from '@composy/size-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(createColorPlugin())
app.use(createSizePlugin())
app.use(createNotificationPlugin())
app.mount('#app')

通知组件的颜色与尺寸直接使用 LDesign 全局 CSS 变量。应用需安装 Color 与 Size 插件，并可通过这两个插件的主题配置统一调整外观。框架无关 Core 内置的 LDesignNotification 自定义元素也读取相同变量；若单独使用它，宿主同样需要接入 Color 与 Size 变量。

目录结构

packages/vue/
├── src/              # 源码
├── package.json
└── .ldesign/         # Builder、ESLint、ESM/CJS TypeScript 与项目元数据

依赖

• @composy/notification-core — 核心引擎
• @composy/color-vue — 提供通知组件使用的全局颜色变量（peerDependency）
• @composy/size-vue — 提供通知组件使用的全局尺寸变量（peerDependency）
• vue ^3.3.0 (peerDependency)

开发

pnpm run build
pnpm run type-check
pnpm run type-check:cjs
pnpm run lint:check

Vue 适配层复用 Core，保持 Vue 和 Core 为外部依赖；@composy/builder 使用 rolldown 生成 dist/、es/、esm/ 与 lib/，包根 ESLint/TypeScript 配置文件保留为兼容入口。

License

MIT

iframe / Shadow DOM 挂载

LToast、LMessage、LNotification、LModal、LDrawer、LPopup、LTooltip 和 LPopover 支持 teleportTo。在 iframe 中传入所属文档的 body，在 Shadow DOM 中传入可承载浮层的元素：

<LModal :teleport-to="iframeDocument?.body" v-model:visible="visible" />
<LPopup :teleport-to="shadowOverlayRoot" placement="bottom">
  <template #trigger><button>打开</button></template>
  内容
</LPopup>

useMessage() 的 groupedItems 是响应式 getter；更新 Message 请调用返回对象的 update(id, config)，Manager 会发出 update 事件并同步所有挂载的渲染组件。