asai-vue-host-popbox — 弹窗/弹出层系统

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-host-popbox | src/components/index.ts | —（$global.pop 状态） | Host |

概述

asai-vue-host-popbox 是轻量级弹窗系统，提供模态弹窗、侧边栏、确认框、密码确认与消息队列，状态集中管理于 $global.pop。

集成方式

// monorepo — webclient/src/utils/index.ts
import AsaiVueHostPopbox from '../plugs/asai-vue-host-popbox/src/components/index';
// import '/node_modules/asai-vue-host-popbox/dist/asai-vue-host-popbox.css';
// npm
// import AsaiVueHostPopbox from '@estun/asai-vue-host-popbox';

app.use(AsaiVueHostPopbox, lib);

$global.pop['mypop'].stat = 1; // 打开
$global.msg.fn({ type: 'ok', con: '操作成功', time: 3000 });

独立性约束

• 禁止 cross-import 其它 plugs/*。
• 拖拽依赖 v-drag 指令（host-directives），通过模板/runtime 使用，不 import 指令包源码。

主要 API / 导出

| 组件 | 说明 | |------|------| | PopBox | 模态弹窗（mask + drag bar + slot） | | PopMod | 侧边栏面板 | | PopBoxConfirm / PopBoxConfirmPass | 确认 / 密码确认 | | PopMsgOneByOne | 消息队列 | | PopTipConfirm | 提示确认（插槽） |

控制： $global.pop[id].stat（0=关, 1=开）、.fn 确认回调、.passconfirm 密码。

性能说明

• 组件 lazy 注册；弹窗内容 <KeepAlive> 缓存状态。
• onUnmounted 自动清理 $global.pop[id]，避免泄漏。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0",
    "@estun/asai-vue-host": "^1.0.0",
    "@estun/asai-vue-host-directives": "^1.0.0"
  }
}

PopBox Props

| 参数 | 说明 | |------|------| | ujt | 全局上下文 | | id | 弹窗唯一标识 | | full | 全屏模式 | | maskstyle / popstyle | 样式 |

PopMod 默认样式

右侧 180px 面板，点击遮罩关闭（stat = 0）。

PopMsgOneByOne

$global.msg.fn({ type: 'ok', con: '内容', tit: '标题', time: 3000 });

• 启动从 localStorage 恢复；去重；最多缓存 100 条
• pagehide / visibilitychange 强制 flush

文件结构

asai-vue-host-popbox/
├── src/components/asui/pop/
│   ├── PopBox.vue / PopMod.vue
│   └── components/PopBoxMask.vue …
└── README.md