formline-vue3 v0.0.31

TOC

说明

• 安装: npm install formline-vue3
• 推荐环境: Vue3 + ElementPlus
• 使用场景
  • 使用 "ElementPlus" 制作表单时，常规方法需要在""部分编写很多“表单组件”代码，代码量太大，复制粘贴时需要检查是否有不必要的代码。使用 "formline-vue3"，可以真正的"无脑复制粘贴"，且不会出现很多无用代码。
  • 当你的表单有复杂的场景（比如 "根据某一项的值来切换其他表单项的内容）时，使用常规的方法会导致你的""内容中出现大量的""， 并且需要手动清除“所选值”。使用 "formline-vue3"，只需要在"javascript"代码部分操作数组的内容即可。
• 包内容
  • FlUI：封装"ElementPlus"的常规表单组件（例如：ElCheckbox、ElColor、ElDate、ElDateRange、ElDateTime、ElDateTimeRange、ElInput、ElMulti、ElNumber、ElRadio、ElSelect、ElSwitch、ElTextarea、ElTime、ElTimeRange）。
  • FlEntity："FlUI" 的实例对象，以及一些功能函数（就是 "FlUI"内部使用的数据对象）。
• 源码使用 "vue3+vite+ts" 实现，不过第三方项目暂时好像没有ts提示支持，后续更新会支持。

使用示例

<!-- template -->
<template v-for='(item,index) in _formList.list' :key='item.cid'>
  <template v-if='item.show'>
    <el-form-item :label='item.getName' :prop='item.ident'>
      <FlUI
        :index='index' :seq='-1' :entity='item'
        :elBinds='Object.assign(
          {},
          item.ident === "amount" && { min:10, max:20, },
        )'
        @changeValue='(index, seq, event)=> _formList.setValue(event, index)'
      >
        <template v-if='item.ident === "userName"' #append>FullName</template>
      </FlUI>
    </el-form-item>
  </template>
</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),
]));
// const _formData = computed(()=> _formList.getSimpleData); // 实时计算结果（非必要）

function _bindSubmit() {
  // console.log('_formData', _formData);

  // 通过"FlEntity"的工具函数, 获取"表单输入内容"的结果集合
  const _result = _formList.calcResult(true);

  if (!_result.success) return ElNotification({ title:t('Tip'), message:_result.msg, type:'warning' });
  console.log('_result', _result.data);
}

FlUI 组件的使用

props

emit

FlEntity 工具的使用

FlEntity.ClassList 存储所有"实例对象"的实例（例: ClassInput、ClassNumber....）

所有实例对象的共有属性（不包含 ClassList)

• 注: 所有属性推荐使用提供的 "set函数" 修改值，不太推荐直接通过 "对象.xx = xx" 的方式直接修改。
  • 其一：各个实例对象的属性数据类型内部是定义好的, 直接修改可能会在某些步骤或场景发生一些异常。
  • 其二：某些属性的修改会涉及联动修改，直接修改的话则会跳过定义好的 "联动" 操作，可能导致在 "计算结果" 时可能会发生一些异常。

ClassCheckBox（复选框）（包含"共有属性"）

ClassColor（颜色选择器）（包含"共有属性"）

ClassDate（日期选择器）（包含"共有属性"）

ClassDateRange（日期区间选择器）（包含"共有属性"）

ClassDateTime（日期时间选择器）（包含"共有属性"）

ClassDateTimeRange（日期区间选择器）（包含"共有属性"）

ClassInput（单行文本输入框）（包含"共有属性"）

ClassMulti（下拉多选框）（包含"共有属性"）

ClassNumber（数字输入框）（包含"共有属性"）

ClassRadio（单选框）（包含"共有属性"）

ClassSelect（下拉单选框）（包含"共有属性"）

ClassSwitch（开关选择器）（包含"共有属性"）

ClassTextarea（多行文本输入框）（包含"共有属性"）

ClassTime（时间选择器）（包含"共有属性"）

ClassTimeRange（时间区间选择器）（包含"共有属性"）