el-form-renderer-vue3 1.0.0

package/src/view/update.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="box">update-form</div>
+    <div>默认情况下，updateForm 来者不拒，不在表单设置内的值，也可以存储进去 </div>
+    <div class="update-form">
+        <el-form-renderer :content="content" inline ref="formRender">
+            <el-button @click="setValue">updateForm()</el-button>
+            <div>
+                <el-button type="primary" @click="getValue(false)">log getFormValue()</el-button>
+                <el-button type="primary" @click="getValue(true)">log getFormValue({strict: true})</el-button>
+            </div>
+        </el-form-renderer>
+        <div>{{ value }}</div>
+    </div>
+</template>
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+let formRender = ref()
+let value = ref()
+const content = reactive([
+    {
+        id: 'name',
+        type: 'input',
+        label: 'name',
+        el: {
+            placeholder: 'name'
+        }
+    },
+    {
+        id: 'area',
+        type: 'select',
+        label: 'area',
+        el: {
+            placeholder: 'area'
+        },
+        options: [{
+            label: 'shanghai',
+            value: 'shanghai'
+        }, {
+            label: 'beijing',
+            value: 'beijing'
+        }]
+    }
+]);
+const getValue = (strict) => {
+    let res = formRender.value.getFormValue({ strict })
+    value.value = res
+}
+const setValue = () => {
+    formRender.value.updateForm({
+        name: 'alvin',
+        area: 'shanghai',
+        // 设置冗余字段
+        extraKey: 'extraValue',
+    })
+}
+
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/vmodel.vue

@@ -0,0 +1,137 @@
+<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";
+import elFormRenderer from "../components/femessage/el-form-renderer.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>

package/src/your-component.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-input v-model="newValue" v-bind="$attrs"></el-input>
+</template>
+
+<script setup>
+let emit = defineEmits(["customEvent", "update:modelValue"]);
+
+import { watch, computed, useAttrs } from "vue";
+let props = defineProps({
+  modelValue: String,
+  title: String,
+});
+const attrs = useAttrs();
+console.log(attrs);
+watch(
+  () => props.modelValue,
+  () => {
+    console.log("触发");
+    emit("customEvent", newValue.value);
+  }
+);
+// 计算属性求和
+const newValue = computed({
+  get: () => {
+    console.log("get");
+    return props.modelValue;
+  },
+  set: (value) => {
+    console.log("set");
+    return emit("update:modelValue", value);
+  },
+});
+</script>
+<script>
+export default {
+  // 校验规则
+  // rules: [
+  //   {
+  //     required: true,
+  //     message: "自定义组件的提醒消息",
+  //   },
+  // ],
+
+  // rules 也可以是个函数, 参数是当前表单项配置, 需要返回一个数组.
+  rules(item) {
+    console.log(item);
+    return [
+      {
+        required: true,
+        message: `${item.id} 不能为空`,
+      },
+    ];
+  },
+};
+</script>

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})