el-form-renderer-vue3 1.0.0

package/src/view/getform.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-form-renderer inline :content="content" ref="form">
+        <el-form-item>
+            <el-button type="primary" @click="printValue">print</el-button>
+            <el-button @click="data = {}">reset</el-button>
+        </el-form-item>
+    </el-form-renderer>
+    <div>{{ data }}</div>
+</template>
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const data = ref({})
+const form = ref()
+const content = reactive([
+    {
+        id: 'name',
+        type: 'input',
+        label: 'name',
+        default: 'alvin',
+        el: {
+            placeholder: 'input sth'
+        }
+    },
+    {
+        id: 'area',
+        type: 'select',
+        label: 'select',
+        el: {
+            placeholder: 'select stn'
+        },
+        options: [{
+            label: 'shanghai',
+            value: 'shanghai'
+        }, {
+            label: 'beijing',
+            value: 'beijing'
+        }]
+    }
+]);
+const printValue = () => {
+    data.value = form.value.getFormValue()
+}
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/hidden.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="box">hidden</div>
+    <div>动态隐藏表单项</div>
+    <el-form-renderer ref="form" :content="content" />
+</template>
+<script setup>
+import { reactive, } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+const content = reactive([
+    {
+        type: 'select',
+        id: 'hobby',
+        label: 'hobby',
+        options: [
+            {
+                label: 'football',
+                value: 'football'
+            },
+            {
+                label: 'basketball',
+                value: 'basketball'
+            }
+        ]
+    },
+    {
+        label: 'reason',
+        type: 'input',
+        id: 'reason',
+        el: {
+            placeholder: 'why'
+        }
+    },
+    {
+        label: 'idol',
+        type: 'input',
+        id: 'idol',
+        el: {
+            placeholder: 'your idol?'
+        },
+        hidden: form => form.hobby !== 'basketball'
+    },
+]);
+
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/label.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="box">slot-label</div>
+    <el-form-renderer label-width="100px" :content="content" inline />
+</template>
+<script setup>
+import { reactive, h, resolveComponent } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const content = reactive([
+    {
+        type: 'input',
+        id: 'name',
+        label: h('span', {}, '输入'),
+        el: {
+            size: 'small',
+        }
+
+    }
+]);
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/next.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="box">next</div>
+
+    <el-button type="primary" @click="openDialogWithData">点击打开 Dialog（带数据）</el-button>
+    <el-button type="primary" @click="dialogVisible = true">点击打开 Dialog</el-button>
+
+    <el-dialog v-model="dialogVisible" title="Next Tick" @open="handleOpen" ref="dialog" @close="onClose">
+        <el-form-renderer :content="content" inline ref="formRender" />
+    </el-dialog>
+</template>
+<script setup>
+import { reactive, ref, nextTick } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+let dialogVisible = ref(false)
+const dialog = ref()
+const formRender = ref()
+const content = reactive(
+    [
+        {
+            id: 'name',
+            type: 'input',
+            label: '姓名',
+            el: {
+                placeholder: '请输入'
+            }
+        }
+    ]);
+const handleOpen = async () => {
+
+    console.log(formRender.value)
+    formRender.value.updateForm({
+        name: '小明'
+    })
+
+}
+const openDialogWithData = async () => {
+    // Dialog 的内容是懒渲染的，即在第一次被打开之前，
+    //传入的默认 slot 不会被渲染到 DOM 上，所以需要使用 nextTick 等待 DOM 更新之后才能调用方法
+    dialogVisible.value = true
+    await nextTick()
+    formRender.value.updateForm({
+        name: '小明'
+    })
+}
+const onClose = () => {
+    formRender.value.resetFields()
+}
+
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/picker.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="box">date-picker</div>
+    <el-form-renderer :content="content" inline />
+</template>
+<script setup>
+import { reactive, } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+const content = reactive([
+    {
+        id: 'date',
+        type: 'date-picker',
+        label: 'date',
+        el: {
+            // type: 'daterange',   // 如果 type 为 daterange，则获取到的是一个数组
+            valueFormat: 'timestamp'  // 不使用 value-format 属性，则获取到的是一个空对象，格式请参考 element-ui 组件 date-picker 的日期格式部分
+        }
+    }
+]);
+
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/radioGroup.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="box">radio-group</div>
+
+    <el-form-renderer label-width="100px" :content="content" ref="ruleForm">
+    </el-form-renderer>
+</template>
+<script setup>
+import { reactive } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const content = reactive([
+    {
+        id: 'city',
+        type: 'radio-group',
+        label: 'city',
+        /**
+         * sytle 属性是为了满足 el-radio-button属性而设置,如果不需要使用el-radio-button这可不设置
+         */
+        style: 'button',
+        default: 'new york',
+        options: [
+            /**
+             * el-radio 用 label 来做 v-model 的值
+             * 这里会渲染成 <el-radio label="new york">new york</el-radio>
+             */
+            { label: 'new york' },
+            // 这里会渲染成 <el-radio label="a">guangzhou</el-radio>
+            { label: 'guangzhou', value: 'a' },
+            { label: 'tokyo' },
+        ]
+    }
+]);
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/readonly.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="box">readonly</div>
+    <div>设置 readonly 属性后，el-input 直接展示纯文本的值（value）；el-select 显示对应的 label；其他组件等同于 disabled = true</div>
+    <el-form-renderer readonly label-width="100px" :content="content" ref="ruleForm">
+        <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">submit</el-button>
+            <el-button @click="resetForm('ruleForm')">reset</el-button>
+        </el-form-item>
+    </el-form-renderer>
+</template>
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const ruleForm = ref()
+const content = reactive([
+    {
+        default: '小明',
+        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' }
+        ]
+    }, {
+        default: 'shanghai',
+        type: 'select',
+        id: 'region',
+        label: 'area',
+        options: [{
+            label: '上海',
+            value: 'shanghai'
+        }, {
+            label: '北京',
+            value: 'beijing'
+        }],
+        rules: [
+            { required: true, message: 'miss area', trigger: 'change' }
+        ]
+    }, {
+        default: ['shanghai', 'beijing'],
+        type: 'select',
+        id: 'multi-region',
+        label: 'multi area',
+        options: [{
+            label: '上海',
+            value: 'shanghai'
+        }, {
+            label: '北京',
+            value: 'beijing'
+        }],
+        el: {
+            multiple: true
+        },
+        rules: [
+            { required: true, message: 'miss area', trigger: 'change' }
+        ]
+    }, {
+        default: '[native Date Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)]',
+        type: 'date-picker',
+        id: 'date',
+        label: 'date',
+        el: {
+            type: 'datetime',
+            placeholder: 'select date'
+        },
+        rules: [
+            { type: 'date', required: true, message: 'miss date', trigger: 'change' }
+        ]
+    }, {
+        default: true,
+        type: 'switch',
+        id: 'delivery',
+        label: 'delivery'
+    }, {
+        type: 'checkbox-group',
+        id: 'type',
+        label: 'type',
+        default: ['typeA', 'typeB'],
+        options: [{
+            label: 'typeA'
+        }, {
+            label: 'typeB'
+        }, {
+            label: 'typeC'
+        }],
+        rules: [
+            { type: 'array', required: true, message: 'miss type', trigger: 'change' }
+        ]
+    }, {
+        default: 'resourceA',
+        type: 'radio-group',
+        id: 'resource',
+        label: 'resource',
+        options: [{
+            label: 'resourceA'
+        }, {
+            label: 'resourceB'
+        }],
+        rules: [
+            { required: true, message: 'miss resource', trigger: 'change' }
+        ]
+    }, {
+        default: '小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述',
+        type: 'input',
+        id: 'desc',
+        label: 'desc',
+        el: {
+            type: 'textarea'
+        },
+        rules: [
+            { required: true, message: 'miss desc', trigger: 'blur' }
+        ]
+    }
+]);
+const submitForm = () => {
+    try {
+        ruleForm.value.methods.validate((valid) => {
+            if (valid) {
+                console.log("OK");
+            } else {
+                console.log("error submit!!");
+                return false;
+            }
+        });
+    } catch (error) {
+        console.log(error);
+    }
+};
+const resetForm = () => {
+    ruleForm.value.methods.resetFields();
+};
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/remote.vue

@@ -0,0 +1,115 @@
+<template>
+    <el-form-renderer :content="content" inline />
+</template>
+
+<script setup>
+import { reactive, } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+let getRemoteUrl = (query) => 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-form-renderer?q=remote&input=' + query
+
+const content = reactive(
+    [
+        {
+            type: 'select',
+            id: 'select',
+            label: 'remote-by-url',
+            remote: {
+                url: '' // 通过设置 url，获取远程配置 options
+            },
+            el: {
+                placeholder: '请输入会发请求,',
+                filterable: true,
+                remote: true,
+                remoteMethod: query => {
+                    content[0].remote.url = getRemoteUrl(query)
+                }
+            }
+        },
+        {
+            type: 'select',
+            id: 'remote-by-request',
+            label: 'remote-by-request',
+            remote: {
+                // filterable 与 remote 为 true 时，会传入 query 参数
+                request(query) {
+                    console.log(query)
+                }
+            },
+            el: {
+                width: '200px',
+                placeholder: '请输入，控制台会打印输入值',
+                filterable: true,
+                remote: true,
+            }
+        },
+
+        // 可以自定义 request 方法，做各种操作
+        {
+            type: 'radio-group',
+            id: 'radio',
+            label: 'radio',
+            remote: {
+                url: 'fake.url', // 同时存在 url 与 request, 以后者为准
+                request() {
+                    const resp = {
+                        path: [
+                            { title: 'resourceA', name: 1 },
+                            { title: 'resourceB', name: 2 },
+                        ]
+                    }
+                    return new Promise(r => setTimeout(() => r(resp), 2000))
+                },
+                dataPath: 'path',
+                label: 'title',
+                value: 'name'
+            }
+        },
+        // request 报错时也可以处理
+        {
+            type: 'checkbox-group',
+            id: 'checkbox',
+            label: 'checkbox',
+            default: [],
+            remote: {
+                request() {
+                    // throw new Error('test')
+                    return Promise.reject(new Error('test2'))
+                },
+                onError: error => {
+                    console.warn(error.message)
+                    return [
+                        { label: 'typeA' },
+                        { label: 'typeB' },
+                        { label: 'typeC' },
+                    ]
+                }
+            }
+        },
+        // 你想远程配置任何 prop 都行！
+        {
+            type: 'cascader',
+            id: 'cascader',
+            label: 'cascader',
+            default: [],
+            remote: {
+                prop: 'options',
+                request() {
+                    return [
+                        {
+                            label: 'hello',
+                            value: 'hello',
+                            children: [
+                                {
+                                    label: 'world',
+                                    value: 'world',
+                                }
+                            ]
+                        },
+                    ]
+                },
+            }
+        },
+    ]);
+
+</script>

package/src/view/rules.vue

@@ -0,0 +1,46 @@
+<template>
+    <el-form-renderer :content="content" :rules="rules" />
+</template>
+<script setup>
+import { reactive } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+let rule = [
+    { required: true, message: 'using form rules', trigger: 'change' },
+    { min: 3, max: 5, message: '3 <= length <= 5', trigger: 'change' }
+]
+const rules = reactive({ desc: [...rule] })
+const content = reactive([
+    {
+        id: 'name',
+        type: 'input',
+        label: 'name',
+        el: {
+            placeholder: 'name'
+        },
+        rules: [
+            {
+                required: true,
+                message: 'using form-item rules',
+                trigger: 'change'
+            }
+        ]
+    },
+    {
+        type: "input",
+        id: "desc",
+        label: "desc",
+    },
+    {
+        type: "input",
+        id: "money",
+        label: "money",
+        rules: [{ required: true, validator: (rule, value, callback) => value >= 0.01 ? callback() : callback(new Error('最小充值金额为0.01元')) }],
+    },
+]);
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/rulesPlus.vue

@@ -0,0 +1,34 @@
+<template>
+    <el-form-renderer label-width="100px" :content="content" ref="form" :rules="rules">
+    </el-form-renderer>
+</template>
+<script setup>
+import { reactive } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const rule = [
+    { required: true, message: '请输入活动名称', trigger: 'change' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
+];
+const rules = reactive({ name: [...rule] })
+const content = reactive(
+    [
+        {
+            type: "input",
+            id: "name",
+            label: "name",
+        },
+        {
+            type: "input",
+            id: "desc",
+            label: "desc",
+            rules: [...rule],
+        },
+    ]
+);
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/setoptios.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="box">set-options</div>
+  <el-form-renderer ref="form" :content="content" inline>
+    <el-button @click="setOptions">set</el-button>
+  </el-form-renderer>
+</template>
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const form = ref();
+const content = reactive([
+  {
+    id: "area",
+    type: "select",
+    label: "select",
+    el: {
+      placeholder: "select",
+    },
+    options: [
+      {
+        label: "shanghai",
+        value: "shanghai",
+      },
+      {
+        label: "beijing",
+        value: "beijing",
+      },
+    ],
+  },
+]);
+
+const setOptions = () => {
+  form.value.setOptions("area", [
+    {
+      label: "guangzhou",
+      value: "guangzhou",
+    },
+    {
+      label: "hangzhou",
+      value: "hangzhou",
+    },
+  ]);
+};
+</script>
+<style scoped>
+.box {
+  margin: 20px 0;
+  font-size: 20px;
+}
+</style>

package/src/view/slot.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="box">slot</div>
+
+    <el-form-renderer :content="content">
+        <template v-slot:id:age>
+            <button type="button">a button insert before age</button>
+        </template>
+
+        <template #default>
+            <div style="color: #2a7">
+                default slot is at the bottom
+            </div>
+        </template>
+    </el-form-renderer>
+</template>
+<script setup>
+import { reactive } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const content = reactive([
+    {
+        id: 'name',
+        label: 'name',
+        type: 'input'
+    },
+    {
+        id: 'age',
+        label: 'age',
+        type: 'input'
+    }
+]);
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/testAttrs.vue

@@ -0,0 +1,17 @@
+<!-- 父组件 ParentCom.vue -->
+<template>
+  <ChildCom class="large" @click="onClick" />
+</template>
+
+<script setup>
+import ChildCom from "../ChildCom.vue";
+const onClick = () => {
+  console.log("父组件");
+};
+</script>
+<style scoped>
+.large {
+  color: red;
+  font-size: 32px;
+}
+</style>