Skip to content

隐藏内置组件

在表单设计器中,您可以通过配置隐藏不需要的内置组件,以便定制设计器的界面。config.hiddenItemconfig.hiddenMenu参数允许您控制组件的显示和隐藏。

hiddenItem

用于指定需要隐藏的内置组件。您可以通过传入一个包含组件标识符的数组来实现隐藏。

vue
<template>
    <fc-designer :config="config" />
</template>


<script setup>
    const config = {
        // 隐藏输入框和密码输入框
        hiddenItem: ['input', 'password'],
    }
</script>

hiddenMenu

用于隐藏整个组件分组。您可以通过传入一个包含组件分组标识符的数组来实现隐藏。

vue
<template>
    <fc-designer :config="config" />
</template>


<script setup>
    const config = {
        // 隐藏所有子表单组件
        hiddenMenu: ['subform']
    }
</script>

内置组件

PC端设计器

  • 输入框 - 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
  • 栅格布局 - fcRow
  • 表格布局 - fcTable
  • 盒子布局 - fcFlex
  • 标签页 - elTabs
  • 间距 - space
  • 卡片 - elCard
  • 折叠面板 - elCollapse
  • 描述列表 - elDescriptions
  • 弹出框 - fcDialog
  • 抽屉 - fcDrawer
  • 三列栅格 - col3
  • 四列栅格 - col4
  • 四行三列表格 - table43
  • 金额 - chineseAmount
  • 时长 - duration

内置组件-移动端

  • 输入框 - 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
  • 栅格布局 - fcRow
  • 表格布局 - fcTable
  • 盒子布局 - fcFlex
  • 标签页 - vanTabs
  • 间距 - space
  • 折叠面板 - vanCollapse
  • 单元格 - vanCellGroup
  • 三列栅格 - col3
  • 金额 - chineseAmount
  • 弹出层 - fcPopup

内置组件分组

  • 模板 - template
  • 基础组件 - main
  • 子表单组件 - subform
  • 辅助组件 - aide
  • 布局组件 - layout