@dimple-smile/dimple-lowcode

v0.3.14

Published

2 years ago

简单的表单设计器

Downloads

101

0High
0Medium
0Low

xiecp

表单设计器表单引擎拖拉拽低代码 lowcode

简介

一款无额外心智负担的表单设计器。具有以下特点：

无额外运行时，支持嵌入任意业务系统
组件式引入，支持个性化的业务初始配置
极简的组件拓展方式，飞速拓展业务进行表单搭建
基于element-ui

组件效果预览

你有两种方式预览

使用浏览器访问该地址：https://dimple-lowcode.vercel.app 进行预览。
这个项目本身就是一个 vue-cli 项目，git clone该项目到本地后，npm i之后 npm run dev即可预览。

安装

(Back to top)

// 1.该组件依赖于element-ui，首先保证项目内引用了element-ui

// 2.在命令行里执行
$ npm i @dimple-smile/dimple-lowcode

// 3.在你的代码里写
import { DimpleLowcodeForm } from '@dimple-smile/dimple-lowcode'

使用说明

(Back to top)

下面是一个简单的使用例子

在src/App.vue文件里能看到预览使用的栗子

<template>
  <div style="height: 100vh">
    <DimpleLowcodeForm :materials="materials" :config="config" :data="data" />
  </div>
</template>

<script>
import { DimpleLowcodeForm } from '@dimple-smile/dimple-lowcode'
export default {
  components: { DimpleLowcodeForm },
  data() {
    return {
      config: {},
      materials:[],
      data:[],
    }
  },
}
</script>

参数

(Back to top) | 参数名 | 意义 | 类型 | 默认值 | 说明 | | -| -| -| - | - | | value | 渲染的表单数据 | Array | [] | 用于预置渲染或者预览渲染表单页面，支持v-model | | systemMaterials | 系统素材列表 | Array | systemMaterials() | 系统库素材库，import { systemMaterials } from '@dimple-smile/dimple-lowcode' 可以拿到 | | materials | 素材列表 | Array | [] | 会添加于系统库之后 | | config | 配置项 | Object | {} | 可以填一些初始的表单配置，支持sync双向绑定 | | preview | 是否为预览模式 | Boolean | null | 是否为预览模式，支持sync双向绑定 | | saveRequestConfig | 保存时的自定义配置 | Function | null | 此配置为一个函数，会带上当前框架已经校验完成的axios请求配置 | | btnRequestConfig | 按钮提交时的自定义配置 | Function | null | 此配置为一个函数，会带上当前框架已经校验完成的axios请求配置 | | saveHandler | 自定义保存操作 | Function | null | 配置后请求按钮会替换为此Handler，参数：{ layout,config } | | btnHandler | 自定义按钮操作 | Function | null | 配置后按钮操作事件会替换为此Handler，参数：{ layout,config,btnConfig } | | renderType | 渲染类型 | string | form-item | 每个渲染item的渲染类型，默认为表单项，填入custom可以为一个纯粹的容器 | | gutter | 布局子项之间的间距 | string | null | 单位为px或者vw、vh | | gutterPlacement | gutter的位置 | string | right | 支持['top', 'bottom', 'left', 'right']四选一 |

// materials 配置示例
import { FormItem } from '@/components/form' 
import { 
  valueTypes, // 所有支持的数据类型
  editTypes, // 所有支持的参数编辑类型
} from '@dimple-smile/dimple-lowcode'

[
  {
    key: 'custom', 
    name: '业务组件库',
    components: [{
      key: 'custom.input', // 组件的key，必须保证全局唯一
      name: '业务输入框', // 组件的名称
      component: FormItem, // 组件的引用
      value: '', // 组件v-model的值，所有业务组件必须实现v-model
      valueType: valueTypes.string.value, // 数据类型，可以从valueTypes中获取支持的类型
      defaultProps: { type: 'input' }, // 组件的默认参数

      // renderType: 'form-item', // 组件渲染类型，默认不需要传入可以从['form-item','mobile-form-item','custom']中选择
      // defaultInputProps: {}, // 默认值输入使用组件录入时的参数

      // props对象为当前组件可配置的参数列表，每一项的编辑类型可以从editTypes中选择，每一项的值会被赋予到组件的props中
      props: {
        options: { 
          label: '选项列表', // 参数的标签名称
          value: [], // 参数的值
          editType: editTypes.options // 编辑参数时使用的组件类型
        },
      },
    }]
  }
]

// config 配置

// 表单的默认配置，import { formConfig } from '@dimple-smile/dimple-lowcode'
const formConfig = () => {
  return {
    // id: '', // 表单id，不传会自动生成
    name: '', // 表单名称
    columnWidth: '100%', // 表单项的列度
    style: { padding: '20px' }, // 表单容器的样式
    formProps: { // 表单的配置
      labelLength: 8, // 表单下所有项目的文本宽度
      alignItems: 'center', // 表单下所有项目的内容对齐方向
      labelPosition: 'right', // 表单下所有项目的标签对齐方向
      // marginBottom: '20px', // 表单下所有项目的距离底部距离
    },
    buttons: [], // 表单的操作按钮组，可以配置多个，每一项都需要满足formButtonItem的配置
    save: { ...formButtonItem, text: '保存', btnType: 'primary' }, // 表单保存配置，和按钮配置formButtonItem一样
  }
}

// 操作按钮的配置
const formButtonItem = {
  text: '按钮', // 按钮显示的文本
  btnType: 'default', // 按钮的类型：primary / success / warning / danger / info / text
  operateType: buttonOperateTypes.request.value, // 按钮的操作类型，见buttonOperateTypes
  api: '', // 按钮操作类型为网络请求时，请求的接口地址
  formDataFiledName: 'form', // 发起网络请求时表单数据的字段名
  successMsg: '发送成功', // 发起网络请求时发送成功的提示信息
  errorMsg: '发送失败', // 发起网络请求时发送失败的提示信息
  headers: [], // requestParamItem[]
  body: [], // requestParamItem[]

  link: '', // 按钮操作类型为链接跳转时，跳转的地址
}

// 按钮的操作类型 import { buttonOperateTypes } from '@dimple-smile/dimple-lowcode'
const buttonOperateTypes = {
  request: { value: 'request', label: '网络请求' },
  link: { value: 'link', label: '链接跳转' },
}