钤凑讪 发表于 2026-1-16 16:15:02

vue 可视化表单设计器 vxe-form-design 创建自定义控件的详细用法（教程一）

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

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

<template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template>定义控件

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

步骤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
这里是定义该控件的渲染时的表单模板
<template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

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

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

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template><template>

    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>

</template>注册控件

目录：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 <DemoFormDesignInputWidgetView renderOpts={renderOpts} renderParams={renderParams}/>
},
// 渲染控件右侧的属性配置视图
renderFormDesignWidgetFormView (renderOpts, renderParams) {
    return <DemoFormDesignInputWidgetProps renderOpts={renderOpts} renderParams={renderParams}/>
}
})在 main.js 引入
// ...
import './form-design/inputWidget'
// ...使用效果

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

珠尿娜 发表于 2026-1-17 10:09:28

鼓励转贴优秀软件安全工具和文档！

致掣 发表于 2026-1-19 07:58:04

感谢分享，下载保存了，貌似很强大

宁觅波 发表于 2026-1-19 11:39:43

喜欢鼓捣这些软件，现在用得少，谢谢分享！

掳诚 发表于 2026-1-20 01:15:17

这个好，看起来很实用

赏勿 发表于 2026-1-20 10:03:06

谢谢分享，试用一下

甘子萱 发表于 2026-1-24 05:30:39

热心回复！

即息极 发表于 2026-1-25 09:53:45

感谢分享，学习下。

狙兕 发表于 7 天前

不错，里面软件多更新就更好了

幽淆 发表于 5 天前

喜欢鼓捣这些软件，现在用得少，谢谢分享！

锑砖 发表于 12 小时前

谢谢分享，辛苦了
页: [1]
查看完整版本: vue 可视化表单设计器 vxe-form-design 创建自定义控件的详细用法（教程一）