asai-vue-host-directives — Vue 3 自定义指令集合

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-host-directives | src/components/index.ts | —（全局指令 v-*） | Host |

概述

asai-vue-host-directives 提供拖拽、缩放、全屏、长按、滚动、权限控制、虚拟键盘绑定等 Vue 3 自定义指令，启动时 eager 注册到 Vue 应用。

集成方式

// monorepo — webclient/src/utils/index.ts
import AsaiVueHostDirectives from '../plugs/asai-vue-host-directives/src/components/index';
// npm
// import AsaiVueHostDirectives from '@estun/asai-vue-host-directives';

app.use(AsaiVueHostDirectives, lib);
// 模板中直接使用：v-drag、v-longpress 等

独立性约束

• 禁止 cross-import 其它 plugs/*。
• v-keyboard 通过 ujt.$global 与 $fn.AsaiVueKeyboard 运行时关联，不在本包 import keyboard 插件。

主要 API / 导出

| 指令 | 说明 | |------|------| | v-drag | 指针拖拽，边界限制 | | v-draggame | 游戏式拖拽，碰撞检测 | | v-dragzoom | 拖拽 + 缩放 + 参考线 | | v-popresizezoom | 弹窗右下角缩放 | | v-resizeflexwidthzoom | 弹性宽/高调整 | | v-fullscreen | 全屏切换（CSS 类） | | v-longpress | 长按手势 | | v-scrollbottom | 自动滚到底部 | | v-dbpointerdown | 双击 Pointer Down | | v-userlevel / v-levelread | 权限显示控制 | | v-keyboard | 输入框绑定虚拟键盘 |

性能说明

• 指令模块 eager 全量注册，体积小，对首屏影响有限。
• 拖拽类指令使用 requestAnimationFrame 节流与 translate3d GPU 加速。
• Passive 监听器用于滚动相关场景。

peerDependencies 建议

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

指令详细说明

v-drag

<div v-drag="{ domarea: 'drag-container' }">可拖拽元素</div>

| 参数 | 类型 | 说明 | |------|------|------| | domarea | string | 限制拖拽范围的容器 ID |

v-fullscreen

<div v-fullscreen="{ dom: 'target-id', type: 2 }">双击全屏</div>

| 参数 | 类型 | 说明 | |------|------|------| | dom | string | 目标元素 ID | | type | 1\|2 | 1=单击, 2=双击 |

v-longpress

<div v-longpress="{ long: 1000, hold: (e) => {}, release: (e) => {} }">长按</div>

v-keyboard

<input v-keyboard="{ ujt, auto: { x: 0, y: -100 }, style: { area: {}, main: {} } }" />

将输入元素与 $global.keyboard 关联，需宿主已注册 AsaiVueKeyboard。

v-draggame / v-dragzoom / v-popresizezoom / v-resizeflexwidthzoom

详见各指令 asdirectives/*/index.ts；参数含 ujt、pos、dom、scale、gameevents 等。

通用工具 — vtTouchCom

| 方法 | 说明 | |------|------| | eStop(e) | 阻止默认与冒泡 | | fnPThrottle(fn) | rAF 节流 | | vtTouchInit/Down/Up | 触控初始化 |

文件结构

asai-vue-host-directives/
├── src/components/
│   ├── index.ts
│   └── asdirectives/v-drag/ … v-keyboard/
└── README.md