nox_component

基于Element-UI二次封装的前端组件库。目前支持输入框、下拉选择框、日期这三个常用组件，后面在工作过程中会继续增加支持的组件。

安装并全局引入

# 安装
npm i nox_component

# 全局引入（main.js）
import NoxComponent from 'nox_component'
Vue.use(NoxComponent);

注意事项

由于开发过程中使用大量 Element-UI 相关组件，请确保宿主项目已安装并全局注册 Element-UI 。

当前提供组件

动态表单

NxForm 基于 Element UI 封装的动态表单组件，支持通过配置字段数组快速生成表单，减少重复代码。

特性

• 🔧 配置驱动：通过 fields 数组定义表单项，自动生成表单

• 📦 内置常用组件：支持输入框、选择器、日期选择器

• ✅ 表单校验：支持为每个字段配置校验规则

• 🔄 双向绑定：支持 v-model 绑定表单数据

• 🎨 灵活布局：支持栅格布局、自定义列宽、标签宽度等

API

Props

|参数名|说明|类型|默认值| |---|---|---|---| |fields| 表单字段配置数组（必填）| Array| -| |value / v-model| 表单数据对象| Object |{}| |labelWidth| 表单域标签的宽度| String |'120px'| |gutter |栅格间隔（px）| Number| 20| |colSpan| 默认每个字段占据的栅格列数（共24列） |Number| 12|

Fields 配置项

fields 数组中的每个对象支持以下属性：

|字段名| 说明| 类型 |默认值| |---|---|---|---| |prop |字段在表单数据中的键名（必填）| String| -| |type |表单项类型（必填），见下方支持的类型| String| -| |label |标签文本| String| -| |span |当前字段占据的栅格列数（1~24），优先级高于 colSpan| Number |colSpan 的值| |width |组件宽度（如 200px、50%） |String |'100%'| |rules |校验规则，同 Element UI Form 的规则| Array| -| |props |传递给具体组件的额外属性（见下方各组件说明）| Object |{}|

Events

|事件名| 说明| 回调参数| |---|---|---| |input |表单数据变化时触发 |(formData) 当前表单数据| |change |表单数据变化时触发（同 input）| (formData) 当前表单数据|

推荐使用 v-model 绑定数据，无需手动监听事件。

Methods

通过 ref 调用组件实例方法：

|方法名| 说明| 参数| |---|---|---| |validate |对整个表单进行校验| (callback: Function) 校验完成回调，参数为 (valid, invalidFields)| |resetFields |重置表单（清空校验结果并重置字段值为初始值）| 无 |clearValidate |清空校验结果| 无|

🚀 让开发更简单，让表单更优雅

NxForm 是您项目中的得力助手——

• ✅ 开箱即用：一份配置，一个表单，告别重复的模板代码
• ✅ 灵活扩展：轻松接入更多自定义组件，满足复杂业务场景
• ✅ 团队提效：统一表单风格，降低维护成本，新人也能快速上手

🎯 立即集成 NxForm，释放你的开发生产力！
📦 持续迭代，欢迎 Star / Fork / 贡献代码
💡 有任何建议或需求，欢迎与我们交流反馈

让每一份表单，都成为优雅的代码艺术。