Skip to content

@elfui/core API

@elfui/core 是应用唯一标准运行时入口,覆盖宏组件、响应式、生命周期、模型、指令、插件和内置渲染能力。普通应用不需要直接依赖 @elfui/runtime@elfui/reactivity

宏组件

defineHtmldefinePropsdefineEmitsdefineModeldefineSlotsdefineStyledefineOptionsdefineDirectivedefineNameuseComponents

推荐直接把内联模板字符串传给宏:

ts
export default defineHtml(`<button>${label}</button>`);
defineStyle(`:host { display: block; }`);

defineStyle(styleA, styleB) 可以组合多个导入的 CSS 字符串。beta.7 已删除 htmlcssMacroHtmlTemplate;内联模板必须直接传入。defineHtml() 不接受运行时生成的任意字符串,模板必须能被编译器静态分析。

响应式

useRefuseReactiveuseShallowRefuseShallowReactiveuseComputeduseEffectwatchonWatcherCleanupbatchnextTick

batch() 会把多次写入合并为一次下游 effect 刷新。模板事件处理器会自动应用 batch;命令式事务可直接调用该 API。

生命周期

onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmountedonActivatedonDeactivatedonAttributeChangedonErrorCaptured

onMounted() 可以返回清理函数;ElfUI 会在卸载期间、释放组件 DOM 和作用域之前执行它。

应用与 Runtime 用户 API

createAppregisterComponentsresolveComponentTagdefineComponentdefineCustomElementensureCustomElementuseModel

应用级插件、指令、配置使用:

ts
createApp(App).directive("focus", focusDirective).use(plugin).mount("#app");

app.directive() 按 App 隔离;app.component(Component) 只接受组件构造器,并按其既定 tag 注册浏览器全局 Custom Element。

组件局部指令使用 const name = defineDirective(definition),变量名会转换为 kebab-case 模板名;应用级指令使用 app.directive()。Core 不再公开进程级全局指令注册表。configuregetConfigusePlugin 仍用于底层兼容场景;应用代码优先使用 app.configapp.use()

内置组合式函数

provideinjecthasInjectionContextcreateInjectionKeyuseScopedSlotuseHostuseIduseRenderRootuseShadowRootuseAttrsuseAppConfiguseTemplateRefdefineExposeuseEventListeneruseClickOutsideuseEscapeKeyuseScrollLockuseFocusTrapuseResizeObserveruseIntersectionObserveruseFormControlContext

useId() 生成组件实例内稳定、文档内唯一的 ID。详见稳定 ID

内置渲染能力

teleporttransitiontransitionGroupkeepAlivesuspensedynamicComponentprojectLightDom

Internal 子路径

@elfui/core/internal 只供编译器生成代码使用,不是业务代码 API。它可以随编译器版本同步变化,应用不要手写导入。

链式 builder 不在 @elfui/core 中导出。需要链式 API 时使用 @elfui/chain