隐藏内置组件
在表单设计器中，您可以通过配置隐藏不需要的内置组件，以便定制设计器的界面。config.hiddenItem和config.hiddenMenu参数允许您控制组件的显示和隐藏。
隐藏组件
用于指定需要隐藏的内置组件或者模板。您可以通过传入一个包含组件标识符的数组来实现隐藏。
vue
<template>
<fc-designer :config="config" />
</template>
<script setup>
const config = {
// 隐藏输入框和密码输入框
hiddenItem: ['input', 'password'],
}
</script>隐藏菜单
用于隐藏整个组件分组。您可以通过传入一个包含组件分组标识符的数组来实现隐藏。
vue
<template>
<fc-designer :config="config" />
</template>
<script setup>
const config = {
// 隐藏所有子表单组件
hiddenMenu: ['subform']
}
</script>查看组件标识
先讲一下组件/模板标识的查看方法
- 清空当前表单，单独拖出目标组件/模板查看其唯一标识。
- 在 JSON 面板中定位该组件的配置规则。
查看组件的标识
查看模板的标识
内置组件
| 组件名称 | 组件标识(name) |
|---|---|
| 输入框 | input |
| 多行输入框 | textarea |
| 密码输入框 | password |
| 计数器 | inputNumber |
| 单选框 | radio |
| 多选框 | checkbox |
| 选择器 | select |
| 开关 | switch |
| 评分 | rate |
| 时间 | timePicker |
| 时间区间 | timeRange |
| 滑块 | slider |
| 日期 | datePicker |
| 日期区间 | dateRange |
| 颜色选择器 | colorPicker |
| 级联选择器 | cascader |
| 上传 | upload |
| 穿梭框 | elTransfer |
| 树形控件 | tree |
| 树形选择 | elTreeSelect |
| 富文本框 | fcEditor |
| 数据表格 | dataTable |
| 子表单 | group |
| 分组 | subForm |
| 分步表单 | stepForm |
| 计算公式 | fcValue |
| 表格表单 | tableForm |
| 嵌套表单 | nestedTableForm |
| 无限级表单 | infiniteTableForm |
| 提示 | elAlert |
| 按钮 | elButton |
| 文字 | text |
| HTML | html |
| 分割线 | elDivider |
| 标签 | elTag |
| 链接 | elLink |
| 文字提示 | elTooltip |
| 水印 | elWatermark |
| 插槽组件 | fcSlot |
| 栅格布局 | fcRow |
| 表格布局 | fcTable |
| 盒子布局 | fcFlex |
| 标签页 | elTabs |
| 间距 | space |
| 卡片 | elCard |
| 折叠面板 | elCollapse |
| 描述列表 | elDescriptions |
| 弹出框 | fcDialog |
| 抽屉 | fcDrawer |
| 三列栅格 | col3 |
| 四列栅格 | col4 |
| 四行三列表格 | table43 |
| 金额 | chineseAmount |
| 时长 | duration |
内置组件-移动端
| 组件名称 | 组件标识(name) |
|---|---|
| 输入框 | input |
| 多行输入框 | textarea |
| 密码输入框 | password |
| 数字输入框 | stepper |
| 单选框 | radio |
| 多选框 | checkbox |
| 选择器 | select |
| 开关 | switch |
| 评分 | rate |
| 时间 | timePicker |
| 日期 | datePicker |
| 级联选择器 | cascader |
| 日历 | calendar |
| 日历区间 | calendarRange |
| 滑块 | slider |
| 上传 | uploader |
| 计算公式 | fcValue |
| 子表单 | group |
| 分组 | subForm |
| 分步表单 | stepForm |
| 表格表单 | tableForm |
| 通知 | vanNoticeBar |
| 按钮 | vanButton |
| 文字 | text |
| HTML | html |
| 分割线 | vanDivider |
| 标签 | vanTag |
| 图标 | vanIcon |
| 插槽组件 | fcSlot |
| 栅格布局 | fcRow |
| 表格布局 | fcTable |
| 盒子布局 | fcFlex |
| 标签页 | vanTabs |
| 间距 | space |
| 折叠面板 | vanCollapse |
| 单元格 | vanCellGroup |
| 三列栅格 | col3 |
| 金额 | chineseAmount |
| 弹出层 | fcPopup |
内置组件分组
| 分组名称 | 分组 ID |
|---|---|
| 模板列表 | template |
| 基础组件 | main |
| 子表单组件 | subform |
| 辅助组件 | aide |
| 布局组件 | layout |