dynamic-form-vue3

介绍

基于 vue3+ts+vite+element-plus+vant 的动态表单组件库（表单填写支持移动端），丰富的表单元素，灵活设计各种表单，支持正则表达示校验，强大的自定义脚本，可实现复杂表单场景。

演示地址

http://cdxming.com/form/

软件架构

vue3+ts+vite+element-plus+json-viewer

安装教程

1.  npm install dynamic-form-vue3
2.  import DynamicForm from 'dynamic-form-vue3'
3.  import 'dynamic-form-vue3/dynamic-form-vue3.css'
4.  Vue.use(DynamicForm)

使用说明

1. 表单设计

<template>
  <form-design
    :element-list="[]"
    :form-config="formParams"
    file-upload-url=""
    file-download-url=""
    @save="save"
  >
    <template #title>
      <div align="center">这是插槽标题</div>
    </template>
  </form-design>
</template>
<script>
  export default {
    methods: {
      // 保存表单参数
      save(data) {
        console.log(data);
      },
    },
  };
</script>

2. 表单展示

<template>
  <div>
    <el-button type="primary" @click="formValidate()">校验表单</el-button>
    <el-button type="primary" @click="previewGetData()">校验并获取值</el-button>
  </div>
  <form-preview
    ref="fromElementRef"
    :element-list="previewData"
    :form-config="designStore.formParams"
    file-upload-url=""
    file-download-url=""
  />
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        elements: [
          {
            span: 24,
            type: "Input",
            key: "Input_c38b675b4c254ab2adf310a49508e47f",
            label: "单行文本",
            value: "",
            labelWidth: 1,
            model: "Input_b047ba8f94934b38b514bb54f4c1e0bd",
            width: "100",
            parent: "",
            child: [],
            options: {
              defaultValue: {
                type: "STATIC",
                value: "",
              },
              placeholder: "",
              disabled: false,
              hidden: false,
              dynamicVisible: false,
              dynamicDisabled: false,
              dynamicVisibleScript: "",
              dynamicVisibleParams: {
                dynamicRuleValue: false,
                rules: [
                  {
                    element: [],
                    elementType: "",
                    elementOptions: [],
                    toggleInput: false,
                    inputModel: true,
                    rule: "",
                    value: "",
                  },
                ],
              },
              dynamicDisabledScript: "",
              dynamicDisabledParams: {
                dynamicRuleValue: false,
                rules: [
                  {
                    element: [],
                    elementType: "",
                    elementOptions: [],
                    toggleInput: false,
                    inputModel: true,
                    rule: "",
                    value: "",
                  },
                ],
              },
              type: "text",
              prepend: "",
              append: "",
              clearable: true,
              readonly: false,
              maxLength: 0,
              focusEvent: {
                targetElement: "",
                targetTableRowIndex: -1,
                script: "",
                rules: [
                  {
                    type: 1,
                    value: "",
                    tableRowIndex: -1,
                  },
                ],
              },
              blurEvent: {
                targetElement: "",
                targetTableRowIndex: -1,
                script: "",
                rules: [
                  {
                    type: 1,
                    value: "",
                    tableRowIndex: -1,
                  },
                ],
              },
              changeEvent: {
                targetElement: "",
                targetTableRowIndex: -1,
                script: "",
                rules: [
                  {
                    type: 1,
                    value: "",
                    tableRowIndex: -1,
                  },
                ],
              },
            },
            rules: [
              {
                required: false,
                message: "必填项",
                trigger: ["blur", "change"],
              },
            ],
          },
        ],
        formParams: {
          labelPosition: "top",
          labelWidth: 104,
          size: "medium",
        },
      };
    },
    methods: {
      formValidate() {
        this.$refs.dynamicForm
          .formValidate()
          .then((result) => {
            if (result) {
              this.$message({
                message: "表单校验通过！",
                type: "success",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      previewGetData() {
        this.$refs.dynamicForm.getFormData().then((result) => {
          if (result) {
            console.log(result);
          }
        });
      },
    },
  };
</script>

联系方式

QQ：281323984