说明

• 安装: npm install formline-vue3
• 推荐环境: Vue3 + ElementPlus
• 使用场景
  • 使用 "ElementPlus" 制作表单时，一般需要在 "template"部分编写很多 "表单组件"代码，代码量大。且写完一个组件代码后复制粘贴到第二个组件上时，需要检查是否有不必要的代码。如果使用 "formline-vue3"，可以真正的 "无脑复制粘贴"，且对代码友好。
  • 当表单存在复杂的场景（比如 "根据某个下拉框的值来切换其他表单项的内容）时，常规写法会导致你的 "template"中出现大量的"<if><else>"，且需要同步修改较多变量。使用 "formline-vue3"，只需要在 "javascript"代码部分操作数组的内容即可。
• 包内容
  • FlUI：封装 "ElementPlus"的常规表单组件（例如：ElCheckbox、ElColor、ElDate、ElDateRange、ElDateTime、ElDateTimeRange、ElInput、ElMulti、ElNumber、ElRadio、ElSelect、ElSwitch、ElTextarea、ElTime、ElTimeRange）。
  • FlEntity："FlUI" 的实例对象，以及一些功能函数（就是 "FlUI"内部使用的数据对象，直接传入 "FlUI"的props即可）。
• 源码使用 "vue3+vite+ts" 实现，不过第三方项目暂时好像没有ts提示支持，后续更新会支持。

简单使用 Demo

<!-- template -->
<template v-for='(item,index) in _formList.list' :key='item.cid'>
  <el-form-item :label='item.getName' :prop='item.ident'>
    <FlUI
      :index='index' :seq='-1' :entity='item'
      @changeValue='(index, seq, event)=> _formList.setValue(event, index)'
    />
  </el-form-item>
</template>
<el-button @click='_bindSubmit'>提交</el-button>

<!-- script -->
import { reactive } 'vue';
import { FlEntity, FlUI } from 'formline-vue3'; // 引入

// 使用 "FlEntity"中的 "ClassList"创建一个数组, 用来装载所有自定义实例对象
const _formList = reactive(new FlEntity.ClassList.builder([
  // 创建一个 "input"组件的 "数据实例"
  // (唯一标识='userName', label='UserName', 输入框占位符='Please Input UserName', 默认值='')
  FlEntity.ClassInput.builder('userName', 'UserName', 'Please Input UserName', ''),

  // 创建一个 "number"组件的 "数据实例"
  // (唯一标识='amount', label='Amount', 输入框占位符='', 默认值=12)
  FlEntity.ClassNumber.builder('amount', 'Amount', '', 12),
]));

function _bindSubmit() {
  // 通过 "FlEntity"中的工具函数, 获取 "表单输入内容"的结果集合
  console.log('result', _formList.calcResult(true));
}

详细文档

• https://print-vercel.vercel.app/formLineVue3.html#/docLayout/Explanation
• https://githubjudy.github.io/formLineVue3.html#/docLayout/Explanation