dinycore component

版本

• v0.1.10 : 封装element-ui的动态表单
• v0.2.14 : 原生ts封装的基础组件及动态表单， 部分组件正在开发中,支持两种数据结构（新结构文档正在开发中），具体请看 文档

定位

• ts原生封装
• 响应式
• 支持vue3,兼容vue2
• 包括基础组件，重点放在逻辑组件
• 让开发者更多的关注数据结构而非组件样式和响应式兼容等

进度

• 目前该组件库的核心组件为dynamicForm，并且input,textarea，radio,checkbox已完成原生封装，其他使用到的组件仍旧是element，目前由element到原生到迁移正在开发中。
• 如需使用element组件，则使用[email protected]版本即可
• 否则请安静等待全部组件迁移完成，该过程可能会持续一两个月
• 待全部组件迁移完成后，将会做响应式
• 目前仅支持全量引入，后续会添加按需引入

使用方式

// main.ts
import dinycore from 'dinycore'
Vue.component('dn-dynamic-form',dinycore.DnDynamicForm)
// 或直接在使用的vue文件引入
import dinycore from 'dinycore'
...
components:{
    ['dn-dynamic-form']: dinycore.DnDynamicForm
}
/**
 * data: 获取表单数据-questionnaire
 * labelPosition: 表单label和组件排列关系 left/right/top
 * labelWidth: 表单label宽度
 * uploadUrl: 上传图片/文件的接口地址
 * btnList: 表单按钮 
 * onSubmit: (answer:answer) => {} : answer是被提交的表单数据
 * onCancel: () => {} 取消按钮触发事件
 * **/
<dn-dynamic-form 
  :data="questionnaire"  
  :labelPosition="'left'"
  :labelWidth="'300px'"
  :uploadUrl="https://jsonplaceholder.typicode.com/posts/"
  :btnList="[{ label: "取消", event: "onCancel", type: "", plain: true },{ label: "确定", event: "onSubmit", type: "warning",plain: true }]"
  @onSubmit="onSubmit"
  @onCancel="onCancel"/>
...

详细数据结构请前往: https://github.com/JC-Guy/Document

注意事项

1. 仅 单选/多选 能够控制任意题型显/隐
2. 目前仅支持条件判断为 “等于”
3. 字段及结构必须与文档保持 一致