el-form-renderer-vue3 1.0.0 → 1.0.1

package/src/view/update.vue

@@ -1,64 +0,0 @@
-<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

@@ -1,137 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-<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

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