veltra-directives
生成物
| 文件 | 内容 |
|---|---|
| generated/index.md | 指令组索引 |
| generated/groups/ | 每组一篇（包入口、vFocus、vClickOutside、vRipple 等） |
| generated/manifest.json | 同步时间与文件列表 |
根目录执行 bun run sync-veltra-directives 或 bun run sync-skills 可重新生成 generated/。
指令速查
vFocus
挂载时聚焦：可直接用在 <input> 上，或用在容器上由指令在内部查找 input。
<input v-focus />
<div v-focus>
<input />
</div>vClickOutside
在元素外按下并点击时触发回调（常用于关闭浮层）。
<div v-click-outside="handleClose">...</div>function handleClose() {
open.value = false
}vRipple
- 默认启用：
<button v-ripple> - 禁用：
<button v-ripple="false"> - 自定义动画时长（毫秒，指令 arg）：
<button v-ripple:300> - 自定义波纹元素类名：
<button v-ripple="'my-ripple-class'">
注册方式
全局：在消费项目中通常使用根目录 README.md 的完整引入方式：import {UltraUI} from 'ultra-ui/install' 后 app.use(UltraUI)，会注册组件与附带指令（含上述三者）。在 monorepo 内联 @veltra/desktop 时，以当前应用使用的安装入口为准。
按需：
import { vFocus, vClickOutside, vRipple } from '@veltra/directives'
app.directive('focus', vFocus)
app.directive('click-outside', vClickOutside)
app.directive('ripple', vRipple)（模板中 v-focus 对应注册名 focus，依此类推。）
样式依赖
vRipple 依赖波纹样式，按需构建时需单独引入：
import '@veltra/directives/ripple/style'否则波纹无视觉样式；走 UltraUI 全量安装并已引入全量样式时，一般已包含波纹样式链路。