手把手教你用Vue可视化表单设计器打造自定义控件！

vue 可视化表单设计器 vxe-form-design 创建自定义控件的详细用法，vxe-design 是 vxe 下的一个开源的可视化设计器，在使用表单设计器时，通常需要将业务的的每一个控件进行封装，以适应业务的需求，接下来介绍一下如果来定义一个自定义的控件。

https://design.vxeui.com

定义控件分组

支持任意分组和自定义左侧控件分组名称

定义控件

创建了一个自定义的输入框控件，说明，一个控件包含几个步骤：定义控件数据，定义控件表单项模板，定义控件右侧参数配置模板
具体自行命名，该控件示例目录：

步骤1，定义控件数据

目录：src/form-design/inputWidget/demoFormDesignInputWidget.js
这里是定义该控件的字段参数

export const getFormDesignWidgetInputConfig = () => {
  return {
    // 控件名称
    title: '单行输入',
    // 控件图标
    icon: 'vxe-icon-input',
    // 控件参数，用于在右侧配置
    options: {
      placeholder: '请输入',
      maxLength: '',
      showWordCount: false,
      clearable: true,
      align: ''
    }
  }
}

步骤2，定义控件表单项模板

目录：src/form-design/inputWidget/DemoFormDesignInputWidgetView.vue
这里是定义该控件的渲染时的表单模板

步骤3，定义控件右侧参数配置模板

目录：src/form-design/inputWidget/DemoFormDesignInputWidgetProps.vue
这里是定义控件拖拽到视图后，右侧显示的字段配置模板

注册控件

目录：src/form-design/inputWidget/index.jsx

import { VxeUI } from 'vxe-pc-ui'
import { getFormDesignWidgetInputConfig } from './demoFormDesignInputWidget'
import DemoFormDesignInputWidgetView from './DemoFormDesignInputWidgetView.vue'
import DemoFormDesignInputWidgetProps from './DemoFormDesignInputWidgetProps.vue'

// 创建表单设计器控件 - 单行输入
VxeUI.renderer.add('MyFormDesignInputWidget', {
  // 定义左侧控件
  createFormDesignWidgetConfig: getFormDesignWidgetInputConfig,
  // 渲染控件的表单视图
  renderFormDesignWidgetView (renderOpts, renderParams) {
    return 
  },
  // 渲染控件右侧的属性配置视图
  renderFormDesignWidgetFormView (renderOpts, renderParams) {
    return 
  }
})

在 main.js 引入

// ...
import './form-design/inputWidget'
// ...

使用效果

以上就创建了一个控件，对于业务开发就可以继续创建控件了，最终就可以实现一个低代码或零代码平台，可视化拖拽就可以生成业务系统

https://gitee.com/x-extends/vxe-design