Menu
EaFormAssociatedBase for form-associated components. Invoke when creating form components like input, select, checkbox that need form integration.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | form-base |
| description | EaFormAssociatedBase for form-associated components. Invoke when creating form components like input, select, checkbox that need form integration. |
表单组件基类，继承自 EaBase，提供表单集成能力。
import EaFormAssociatedBase from "@core/EaFormAssociatedBase";
HTMLElement
└── EaBase (基础组件基类)
└── EaFormAssociatedBase (表单关联基类)
当组件需要：
<form> 元素交互name、value、required、disabled 等表单属性应继承 EaFormAssociatedBase 而非 EaBase。
import EaFormAssociatedBase from "@core/EaFormAssociatedBase";
import { CustomElement, attribute, query } from "@decorator";
import stylesheet from "./index.scss?inline";
const TAG_NAME = "ea-input" as const;
const bem = createBEM(TAG_NAME);
@CustomElement(TAG_NAME, { styles: [stylesheet] })
export class EaInput extends EaFormAssociatedBase {
@query(".ea-input__inner")
private _input!: HTMLInputElement;
@attribute({
type: String,
default: "",
observer(this: EaInput, newVal: string) {
this._input.value = newVal;
},
})
value: string = "";
@attribute({
type: Boolean,
default: false,
})
disabled: boolean = false;
@attribute({
type: Boolean,
default: false,
})
required: boolean = false;
html(): string {
return `
<div class="${bem()}" part="container">
<input class="${bem.e('inner')}" part="inner" />
</div>
`;
}
$mount(): void {
this.updateContainerClasslist();
}
}
项目提供了表单集成测试文件 src/test/ea-form-integration.test.js，验证表单组件与 <form> 元素的交互行为。
以下组件继承自 EaFormAssociatedBase：
ea-input - 输入框ea-select - 选择器ea-checkbox - 复选框ea-radio - 单选框ea-switch - 开关ea-input-number - 数字输入框ea-slider - 滑块ea-rate - 评分ea-date-picker - 日期选择器ea-time-picker - 时间选择器ea-color-picker - 颜色选择器@attribute decorator for defining HTML attribute-mapped properties. Invoke when creating or updating component attributes that map to HTML attributes.
@property decorator for defining pure JavaScript properties that do NOT map to HTML attributes. Invoke when creating internal component state properties.
BEM SCSS mixins for component styling. Invoke when writing or updating component SCSS styles using block/element/modifier/state mixins.
Component CSS styling standards including variables, host styles, states, and responsive patterns. Invoke when creating or updating component SCSS files.
@CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options.
Component documentation generation. Invoke when writing or updating component documentation including API tables, examples, and usage guides.