Skip to content

组件的方法

vue
<fc-designer ref="designer" />

通过refs.designer调用下面的方法

  • 添加模板和拖拽组件的描述文件,并按照menu字段自动添加到对应的菜单下
ts
  type addComponent = (dragRule: dragRule|dragTemplateRule) =>void;
  type addComponent = (dragRule: Array<dragRule|dragTemplateRule>) =>void;
  • 覆盖添加拖拽组件到指定的菜单下
ts
  type setMenuItem = (menuName: string, list: MenuList) => void;
  • 在设计器左侧添加新的菜单
ts
  type addMenu = (menu: Menu) =>void;
  • 设置设计器表单的生成规则
typescript
  type setRule = (rule: string|Rule[]) => void;
  • 设置设计器表单的表单配置
ts
  type setOption = (opt: Options) => void;

别名方法setOptions

  • 获取设计器表单的渲染规则(Array)
ts
  type getRule = () => Rule[];
  • 获取设计器表单的json渲染规则(string)
ts
  type getJson = () => string;
  • 获取设计器表单的表单配置(Object)
ts
  type getOption = () => Options;

别名方法getOptions

  • 获取设计器表单的表单的json配置(string)
ts
  type getOptionsJson = () => string;
  • 获取表单的formData
typescript
  type getFormData: () => Object;
  • 设置表单的formData
typescript
  type setFormData: (formData: Object) => void;
  • 获取设计器的表单的层级规则描述
typescript
  type getTree: () => TreeData;
  • 获取设计器的表单中表单组件的规则描述
typescript
  type getFormTree: () => TreeData;
  • 预览表单
ts
  type openPreview = () => void;
  • 开启录入数据模式
typescript
  type openInputData: (open: boolean) => void;
  • 清空设计器的表单
ts
  type clearDragRule = () => void;
  • 获取设计器中所有的字段名
typescript
  type fields = () => string[];
  • 选中设计器中指定组件
ts
  type toolActive = (rule:Rule) => void;
  • 清空设计器中组件的选中状态
ts
  type clearActiveRule = () => void;
  • 设置表单配置的表单规则,于config.formRule相同
ts
  type setFormRuleConfig = (rule: () => Rule[], append: boolean) => void;
  • 设置组件基础配置表单的表单规则,于config.baseRule相同
ts
  type setBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;
  • 设置组件验证配置表单的表单规则,于config.validateRule相同
ts
  type setValidateRuleConfig = (rule: () => Rule[], append: boolean) => void;
  • 设置指定组件属性配置的表单规则,于config.componentRule相同
ts
  type setComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;