xfd
xjrsoft-form-design
npm i xjrsoft-form-design
xfd

xjrsoft-form-design

基于Vue3.0的表单设计器

by 付成伟

1.0.12 (see all)License:MITTypeScript:Built-In
npm i xjrsoft-form-design
Readme

vue-form-create

基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 与 cdn 引入的方式。UI 库支持 ant-design-vue 与 element-plus。

预览

支持功能

  • 远端数据获取
  • 图片上传
  • 富文本编辑器
  • 栅格布局
  • 生成 JSON
  • 生成代码

演示地址(github)

https://fuchengwei.github.io/vue-form-create/example/index.html

演示地址(gitee)

http://fuchengwei.gitee.io/vue-form-create/example/index.html

github

https://github.com/fuchengwei/vue-form-create

npm

https://www.npmjs.com/package/vue-form-create

1 安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

$ npm install vue-form-create --save
$ yarn add vue-form-create

浏览器引入

在浏览器中使用 script 标签直接引入文件,并使用全局变量 formCreate

我们在 npm 发布包内的 vue-form-create/dist提供了 formCreate.common.js formCreate.umd.js formCreate.umd.min.js。你也可以通过 jsdelivrUNPKG 进行下载。

<script src='https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js'></script>

注意

  1. 无论 npm 或者 cdn 引入都需要在全局引入 ant-design-vueelement-plus 。并且项目依赖了 acejs , 需要在全局使用 cdn 的方式引入。

    <script src='https://unpkg.com/ace-builds/src-noconflict/ace.js'></script>
    
  2. cdn 引入 ant-design-vue 需要自行引入 moment

  3. 不想在全局安装也可以在组件内直接使用相应的组件。

    import {
      AntdDesignForm,
      ElDesignForm,
      AntdGenerateForm,
      ElGenerateForm
    } from 'vue-form-create'
    

示例

npm 引入

import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue-form-create'
import 'ant-design-vue/dist/antd.css'

createApp(App)
  .use(antd)
  .use(DesignForm)
  .mount('#app')

浏览器引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/ant-design-vue@next/dist/antd.min.css"
    />
  </head>
  <body>
    <div id="app">
      <antd-design-form />
    </div>
    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js"></script>
    <script src="https://unpkg.com/ace-builds/src-noconflict/ace.js"></script>
    <script src="https://unpkg.com/moment/moment.js"></script>
    <script src="https://unpkg.com/ant-design-vue@next/dist/antd.min.js"></script>
    <script>
      const { createApp, reactive, toRefs } = Vue

      createApp({})
        .use(antd)
        .use(formCreate)
        .mount('#app')
    </script>
  </body>
</html>

2 组件说明

表单设计器(AntdDesignForm)

示例

<template>
  <AntdDesignForm ref="designForm" />
</template>

API

Props
参数说明类型默认值
preview设计器预览操作按钮booleantrue
generateCode设计器生成代码按钮booleantrue
generateJson设计器生成 Json 按钮booleantrue
uploadJson设计器导入 JSON 按钮booleantrue
clearable设计器清空按钮booleantrue
basicFields设计器左侧基础字段配置array-
advanceFields设计器左侧高级字段配置array-
layoutFields设计器左侧布局字段配置array-
方法

通过 ref 可以获取到实例并调用实例方法

方法名说明参数
getJson()获取设计器配置的 JSON 数据-
setJson(value)设置设计器的配置信息通过 getJson 获取的数据
clear()清空设计器
getTemplate(type)获取设计器生成的可以直接使用的代码type 的类型为 'vue' 或 'html'
字段说明

基础字段(basicFields)

type字段名
input单行文本
password密码框
textarea多行文本
number计数器
radio单选框组
checkbox多选框组
time时间选择器
date日期选择器
rate评分
select下拉选择框
switch开关
slider滑块
text文字

高级字段(advanceFields)

type字段名
img-upload图片
richtext-editor富文本编辑器
cascader级联选择器

布局字段(layoutFields)

type字段名
grid栅格布局

表单生成器(AntdGenerateForm)

示例

<template>
  <AntdGenerateForm ref="generateForm" />
</template>

API

Props
参数说明类型默认值
data表单 json 配置数据(从表单设计器获取的 json)object-
value表单数据(从表单生成器获取的 value)object-
disabled是否禁用booleanfalse
方法

通过 ref 可以获取到实例并调用实例方法

方法名说明参数
getData()获取表单数据(返回 Promise)-
reset()重置表单数据通过 getJson 获取的数据

3 功能说明

远端数据

单选框,多选框,下拉选择框、级联选择器等选择项需要通过数据生成,这时可以配置远端数据。

设置远端方法地址与返回值。

文件上传

填写服务器上传地址、参数名等配置信息。

4 后续规划

目前是 v1.0.0 的初版,后面预计支持更多的功能组件与布局组件,以及对移动端的支持。

最后如果大家觉得还不错挺好用的话,麻烦给个 Star 😜😜😜。

Downloads/wk

13

GitHub Stars

177

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

8

OPEN ISSUES

12

OPEN PRs

5
VersionTagPublished
1.0.12
latest
7mos ago
No alternatives found
No tutorials found
Add a tutorial