元件建模

元件建模是平台提供的可视化组件设计功能，允许开发者创建可复用的业务组件，提高开发效率。

功能入口

点击"应用 -> 低代码开发 -> 元件建模"进入元件建模界面。

功能说明

元件类型

类型	说明	使用场景
表单元件	可复用的表单组件	人员选择器、部门选择器等
展示元件	可复用的展示组件	统计卡片、图表组件等
业务元件	封装业务逻辑的组件	审批意见、流程历史等

创建元件

点击【新建】进入元件设计界面
配置元件基本信息（名称、编码、类型）
使用拖拽方式设计元件布局
配置元件属性和事件
保存并发布元件

元件属性

属性	说明
元件名称	元件的显示名称
元件编码	元件的唯一标识
元件类型	表单元件/展示元件/业务元件
元件描述	元件的功能说明
输入参数	元件接收的参数定义
输出事件	元件对外暴露的事件

使用元件

在表单建模中使用

打开表单设计器
在左侧组件面板找到"自定义元件"分类
拖拽元件到表单画布
配置元件参数

在代码中使用

<template>
  <!-- 使用自定义元件 -->
  <NwCustomComponent
    :component-code="deptPicker"
    :params="{ multiple: true }"
    @change="handleChange"
  />
</template>

<script setup>
const handleChange = (value) => {
  console.log('选中值:', value)
}
</script>

元件开发规范

参数定义

{
  "props": {
    "value": {
      "type": "string",
      "description": "绑定值"
    },
    "multiple": {
      "type": "boolean",
      "default": false,
      "description": "是否多选"
    }
  }
}

事件定义

{
  "events": {
    "change": {
      "description": "值变化时触发",
      "params": ["value"]
    },
    "select": {
      "description": "选择时触发",
      "params": ["selectedItem"]
    }
  }
}

最佳实践

高复用性：设计通用的元件，避免过度定制
清晰的接口：定义明确的输入参数和输出事件
文档完善：为元件编写使用说明和示例
版本管理：元件更新时注意向下兼容

25 十一月 2025