el-form-renderer-vue3 1.1.0 → 1.1.1

package/{el-form-renderer.md → README.md}

@@ -1,7 +1,196 @@
-## 遗留问题 :带解决
+## 技术交流群 711368818
+
+<img src="./src/assets/qq.jpg"  width="200" />
+
+## 遗留问题 :待解决
 
 select 为 multiple 多选时 必须初始化空数组（在 elementplus v-model 初始化 updateValue 时 为空数组会触发校验）
 
+## Introduction
+
+### WHAT
+
+form-renderer 基于元素 element-plus，但不限于元素 element-plus 组件。在完全继承 element-plus 元素的 form 属性的基础上，进行了扩展。一些非表单组件或自定义组件，因此，用户可以使用一段 json 来呈现完整的表单。
+
+### WHY
+
+在我们的日常开发中，有很多有表单的页面，通常表单结构相似，逻辑重复。el 表单呈现器没有复杂的逻辑。它只转换 JSON 来呈现表单项，节省了编写业务逻辑的时间和精力，并减少了重复代码。
+
+## Features
+
+- 用 json 呈现表单
+- 支持与自定义组件集成
+- 支持 updateForm 方法批量更新表单数据
+- 支持 setOptions 方法，动态更改选择选项
+- 内容支持 inputFormat、outputFormat、trim 以处理组件的输入和输出值
+- 支持 v-model
+
+## Links
+
+- [$attrs 和 $listeners (vue2&&vue3)](https://blog.csdn.net/qq_63358859/article/details/133699476?spm=1001.2014.3001.5501)
+- [vue2 与 vue3 函数式组件](https://blog.csdn.net/qq_63358859/article/details/133635120?spm=1001.2014.3001.5501)
+- [vue 2 与 vue3 获取模版引用 （ref）的区别](https://blog.csdn.net/qq_63358859/article/details/133532229?spm=1001.2014.3001.5501)
+- [vue2 与 vue3 v-model 的区别](https://blog.csdn.net/qq_63358859/article/details/133484380?spm=1001.2014.3001.5501)
+- [vue2 版本](https://blog.csdn.net/qq_63358859/article/details/130442636?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169684271816800180612618%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169684271816800180612618&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-7-130442636-null-null.nonecase&utm_term=render&spm=1018.2226.3001.4450)
+- [中文文档](https://gitee.com/childe-jia/form-render/wikis/%E6%96%87%E6%A1%A3/%E4%BB%8B%E7%BB%8D)
+- [element-plus table 的封装](https://gitee.com/childe-jia/table-vue3)
+
+## Quick Start
+
+```ts
+pnpm i el-form-renderer-vue3
+```
+
+```ts
+import elFormRenderer from "el-form-renderer-vue3";
+app.use(elFormRenderer);
+```
+
+```ts
+<template>
+  <el-form-renderer
+    label-width="100px"
+    :content="content"
+    v-model:FormData="FormData"
+    ref="form"
+  >
+    <el-button @click="resetForm">reset</el-button>
+    <el-button @click="setValue">设置名字为小明</el-button>
+    <pre>{{ FormData }}</pre>
+  </el-form-renderer>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+
+const form = ref();
+let FormData = reactive({
+  name: "",
+  type: [],
+  startDate: "2019-01-01",
+  endDate: "2019-01-02",
+  region: [],
+  date: ["2019-01-01", "2019-01-02"],
+});
+const content = reactive([
+  {
+    type: "input",
+    id: "name",
+    label: "name",
+    attrs: { "data-name": "form1" },
+    el: {
+      size: "default",
+      placeholder: "test placeholder",
+    },
+    rules: [
+      { required: true, message: "miss name", trigger: "blur" },
+      { min: 3, max: 5, message: "length between 3 to 5", trigger: "blur" },
+    ],
+  },
+  {
+    type: "select",
+    id: "region",
+    label: "region",
+    options: [
+      {
+        label: "shanghai",
+        value: "shanghai",
+      },
+      {
+        label: "beijing",
+        value: "beijing",
+      },
+      {
+        label: "guangzhou",
+        value: "guangzhou",
+      },
+    ],
+    el: { filterable: true, multiple: true, multipleLimit: 2 },
+    rules: [{ required: true, message: "miss area", trigger: "change" }],
+  },
+  {
+    type: "date-picker",
+    id: "date",
+    label: "date",
+    el: {
+      type: "daterange",
+      valueFormat: "yyyy-MM-dd",
+    },
+    rules: [{ required: true, message: "miss date", trigger: "change" }],
+    inputFormat: (row) => {
+      if (row.startDate && row.endDate) {
+        return [row.startDate, row.endDate];
+      }
+    },
+    outputFormat: (val) => {
+      if (!val) {
+        return { startDate: "", endDate: "" };
+      }
+      return {
+        startDate: val[0],
+        endDate: val[1],
+      };
+    },
+  },
+  {
+    type: "switch",
+    id: "delivery",
+    label: "delivery",
+  },
+  {
+    type: "checkbox-group",
+    id: "type",
+    label: "type",
+    default: [],
+    options: [
+      {
+        label: "typeA",
+      },
+      {
+        label: "typeB",
+      },
+      {
+        label: "typeC",
+      },
+    ],
+    rules: [{ type: "array", required: true, message: "miss type", trigger: "change" }],
+  },
+  {
+    type: "radio-group",
+    id: "resource",
+    label: "resource",
+    options: [
+      {
+        label: "resourceA",
+        value: "A",
+      },
+      {
+        label: "resourceB",
+        value: "B",
+      },
+    ],
+    rules: [{ required: true, message: "miss resource", trigger: "change" }],
+  },
+  {
+    type: "input",
+    id: "desc",
+    label: "desc",
+    el: {
+      type: "textarea",
+    },
+    rules: [{ required: true, message: "miss desc", trigger: "blur" }],
+  },
+]);
+const resetForm = () => {
+  form.value.methods.resetFields();
+};
+const setValue = () => {
+  FormData.name = "小明";
+};
+</script>
+
+```
+
 ## Props
 
 ```ts
@@ -218,3 +407,7 @@ support all [el-form's methods](https://element.eleme.io/#/zh-CN/component/form#
 | -------- | ------------------------------------------- |
 | default  | insert at bottom                            |
 | id:hello | insert before form-item whose id is 'hello' |
+
+## Inspiration
+
+thanks to [el-form-renderer](https://github.com/femessage/el-form-renderer/)