芋道-低代码

Appearance

属性定义函数集 ​

designer-editor.props.tsx 文件，该文件提供了一套属性定义工具函数，用于在设计器中声明和生成各类组件属性的配置定义（WidgetPropDefine）。每个函数封装了特定 UI 控件（如输入框、选择器、开关、颜色选择器等）的渲染逻辑、数据绑定类型及交互行为，并支持自定义 Element Plus 组件属性。通过组合这些函数，可以快速构建复杂组件的属性编辑面板，同时支持高级功能如表达式绑定、事件处理、可编辑选项、代码编辑器集成等，是设计器属性系统的核心基础设施。

公共说明 ​

  • 所有方法均返回 WidgetPropDefine 对象，用于在低代码设计器中定义组件属性编辑器。
  • 第一个参数 define: WidgetPropDefine 必填，用于指定 key、label、helps、defaultValue 等通用属性。
  • 多数方法支持传入 Element Plus 组件的原生 props（如 disabled、clearable 等）作为第二个/第三个参数。
  • 若属性需根据其他属性动态显示，可使用 isShow 函数控制。

文本展示 ​

说明：textDefine(define, props?)，只读文本，带复制功能。绑定类型为 string。
示例：

ts
textDefine({ key: 'id', label: '唯一ID' })

链接展示 ​

说明：linkDefine(define, props?)，可点击跳转的链接，带复制图标。绑定类型为 string。
示例：

ts
linkDefine({ key: 'docUrl', label: '文档链接' })

单行文本输入 ​

说明：inputDefine(define, props?)，单行文本输入框，带清除按钮和占位符。绑定类型为 string。
示例：

ts
inputDefine({ key: 'title', label: '标题', helps: '帮助文本' })

多行文本输入 ​

说明：textareaDefine(define, props?)，多行文本输入框。绑定类型为 string。
示例：

ts
textareaDefine({ key: 'description', label: '描述' })

数字输入 ​

说明：inputNumberDefine(define, props?)，数字输入框，宽度 100%。绑定类型为 number。
示例：

ts
inputNumberDefine({ key: 'count', label: '数量' })

开关 ​

说明：switchDefine(define, props?)，布尔开关。绑定类型为 boolean。
示例：

ts
switchDefine({ key: 'disabled', label: '禁用' })

颜色选择器 ​

说明：colorPickerDefine(define, props?)，颜色选择器，默认输出 hex 格式。绑定类型为 string。
示例：

ts
colorPickerDefine({ key: 'bgColor', label: '背景色' })

下拉选择 ​

说明：selectDefine(define, options, props?)，下拉选择。单选绑定类型为 string，多选（props.multiple）为 string[]。
示例：

ts
selectDefine(
  { key: 'status', label: '状态' },
  [{ label: '启用', value: 'active' }, { label: '禁用', value: 'inactive' }]
)

按钮单选组 ​

说明：radioButtonDefine(define, options, props?)，按钮样式的单选组。支持 _cancelable（可取消）、_chunkSize（分块渲染）。
示例：

ts
radioButtonDefine(
  { key: 'align', label: '对齐方式' },
  [{ label: '左', value: 'left' }, { label: '右', value: 'right' }],
  { _cancelable: true }
)

普通单选组 ​

说明：radioDefine(define, options, props?)，普通样式的单选组，其余同 radioButtonDefine。
示例：

ts
radioDefine({ key: 'theme', label: '主题' }, [{ label: '亮', value: 'light' }])

按钮多选组 ​

说明：checkboxButtonDefine(define, options, props?)，按钮样式的多选组。绑定类型为 string[]。支持 min/max 限制（通过 props）。
示例：

ts
checkboxButtonDefine(
  { key: 'features', label: '功能' },
  [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }],
  { min: 1, max: 2 }
)

普通多选组 ​

说明：checkboxDefine(define, options, props?)，普通样式的多选组，其余同 checkboxButtonDefine。
示例：

ts
checkboxDefine({ key: 'tags', label: '标签' }, [{ label: '热门', value: 'hot' }])

自动补全文本 ​

说明：autocompleteDefine(define, props?)，带自动补全的输入框。绑定类型为 string。
示例：

ts
autocompleteDefine({ key: 'search', label: '搜索关键词' })

级联选择 ​

说明：cascaderDefine(define, props?)，级联选择器。绑定类型为 any[]。
示例：

ts
cascaderDefine({ key: 'area', label: '地区' })

日期选择 ​

说明：datePickerDefine(define, props?)，日期选择器。绑定类型为 string。
示例：

ts
datePickerDefine({ key: 'startDate', label: '开始日期' })

标签输入 ​

说明：inputTagDefine(define, props?)，标签输入（可输入多个字符串）。绑定类型为 string[]。
示例：

ts
inputTagDefine({ key: 'keywords', label: '关键词' })

提及输入 ​

说明：mentionDefine(define, props?)，提及（@）输入组件。绑定类型为 string。
示例：

ts
mentionDefine({ key: 'assignee', label: '负责人' })

评分 ​

说明：rateDefine(define, props?)，评分组件。绑定类型为 number。
示例：

ts
rateDefine({ key: 'score', label: '评分' })

高性能下拉选择 ​

说明：selectV2Define(define, props?)，高性能下拉选择（适用于大量选项）。绑定类型根据 multiple 为 string 或 string[]。
示例：

ts
selectV2Define({ key: 'user', label: '用户' })

滑块 ​

说明：sliderDefine(define, props?)，滑动条。绑定类型为 number。
示例：

ts
sliderDefine({ key: 'volume', label: '音量' })

时间选择 ​

说明：timePickerDefine(define, props?)，时间选择器。绑定类型为 string。
示例：

ts
timePickerDefine({ key: 'startTime', label: '开始时间' })

固定时间选择 ​

说明：timeSelectDefine(define, props?)，固定时间点选择器。绑定类型为 string。
示例：

ts
timeSelectDefine({ key: 'meetingTime', label: '会议时间' })

树形选择 ​

说明：treeSelectDefine(define, props?)，树形选择器。绑定类型根据 multiple 为 string 或 string[]。
示例：

ts
treeSelectDefine({ key: 'dept', label: '部门' })

文件上传 ​

说明：uploadDefine(define, props?)，文件上传（仅取文件 URL）。绑定类型为 string。
示例：

ts
uploadDefine({ key: 'avatar', label: '头像' })

分割线 ​

说明：dividerDefine(define?, props?)，分割线，用于属性分组。自动隐藏标签，key 为空。
示例：

ts
dividerDefine({ label: '高级设置' })

格式化数字输入 ​

说明：formatInputNumberDefine(define, props?)，带格式化显示的数字输入（如单位、千分位）。绑定类型为 string。
示例：

ts
formatInputNumberDefine({ key: 'price', label: '价格', helps: '单位：元' })

边距设置 ​

说明：edgeInsetsDefine(define, props?)，四边距输入（上右下左）。绑定类型为 object。表单项标签置顶。
示例：

ts
edgeInsetsDefine({ key: 'padding', label: '内边距' })

可编辑选项 ​

说明：editableOptionsDefine(define, props?)，可编辑的键值对列表。绑定类型为 object。标签置顶。
示例：

ts
editableOptionsDefine({ key: 'attrs', label: '自定义属性' })

数据绑定 ​

说明：propBindDefine(define)，标记该属性支持数据绑定，不渲染 UI。绑定类型为 any，bindable: true。
示例：

ts
propBindDefine({ key: 'dynamicText', label: '动态文本' })

事件定义 ​

说明：eventDefine(key, args?)，定义组件事件（如 click）。 示例：

ts
eventDefine('click', { label: '点击事件', type: 'mouse-function' })

可执行函数 ​

说明：evalFunctionDefine(define, props?)，可执行函数代码编辑器（支持 JS 代码）。
示例：

ts
evalFunctionDefine({ key: 'onClick', label: '点击处理函数' })

代码编辑器 ​

说明：aceInputDefine(define, props?)，代码编辑器（Ace），用于 JSON/JS 等。绑定类型为 string。标签置顶。
示例：

ts
aceInputDefine({ key: 'config', label: '配置项（JSON）' })

动作按钮 ​

说明：actionButtonDefine(define, props?)，组件按钮函数配置。 示例：

ts
actionButtonDefine({ key: 'submitBtn', label: '提交按钮行为' })