easyConfigJsonVue3

A Vue 3 component library for easy JSON configuration, based on Element Plus. 基于 Vue 3 的配置化组件库

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

安装

bash
npm install easy-config-json-vue3
或
yarn add easy-config-json-vue3

使用方式

全局注册

在你的入口文件（通常是 main.ts 或 main.js）中注册：

import { createApp } from 'vue';
import EasyConfigJson from 'easy-config-json-vue3';
import App from './App.vue';
const app = createApp(App);
app.use(EasyConfigJson);
app.mount('#app');

<template>
  <div class="dynamic-form-container">
    <w-easy-config-json-vue
      :easyConfigJsonVue="formConfig"
      :component-configs="componentConfigs"
      :on-field-update="handleFieldUpdate"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import type { FormData, ComponentConfig, FormItemConfig } from '@/types/index';

// 表单数据
const formData = reactive<FormData>({
  username: '',
  role: '',
  createDate: '',
  remark: ''
});

const formRef = ref<FormInstance | null>(null);

// 组件配置
const componentConfigs: Record<string, ComponentConfig> = {
  input: reactive({
    component: 'ElInput',
    modelValue: formData.username,
    props: {
      placeholder: '请输入用户名',
      clearable: true
    }
  }),

  select: reactive({
    component: 'ElSelect',
    modelValue: formData.role,
    props: {
      placeholder: '请选择角色'
    },
    options: [
      {
        component: 'ElOption',
        props: {
          label: '选项1',
          value: 'option1'
        }
      },
      {
        component: 'ElOption',
        props: {
          label: '选项2',
          value: 'option2'
        }
      }
    ]
  }),

  datePicker: reactive({
    component: 'ElDatePicker',
    modelValue: formData.createDate,
    props: {
      placeholder: '请选择日期',
      type: 'date',
      format: 'YYYY-MM-DD'
    }
  }),

  textarea: reactive({
    component: 'ElInput',
    modelValue: formData.remark,
    props: {
      type: 'textarea',
      placeholder: '请输入备注',
      rows: 3
    }
  }),

  submitBtn: reactive({
    component: 'ElButton',
    title: '提交',
    props: {
      type: 'primary'
    }
  }),

  resetBtn: reactive({
    component: 'ElButton',
    title: '重置',
    props: {
      type: 'default'
    }
  })
};

// 表单操作
const handleSubmit = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    console.log('表单数据:', formData);
  } catch (error) {
    if (error instanceof Error) {
      console.error('表单验证失败:', error.message);
    }
  }
};

const handleReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};

// 字段更新处理
const handleFieldUpdate = (field: keyof FormData, value: unknown) => {
  formData[field] = value as FormData[keyof FormData];
};

// 表单配置
const formConfig: FormItemConfig = {
  type: 'form',
  props: {
    model: formData,
    ref: formRef,
    rules: {
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      role: [{ required: true, message: '请选择角色', trigger: 'change' }]
    } as FormRules
  },
  children: [
    {
      type: 'row',
      props: { gutter: 20 },
      children: [
        {
          type: 'col',
          props: { span: 8 },
          children: [
            {
              type: 'form-item',
              props: { label: '用户名', prop: 'username' },
              children: [
                {
                  type: 'input',
                  configKey: 'input',
                  field: 'username'
                }
              ]
            }
          ]
        },
        {
          type: 'col',
          props: { span: 8 },
          children: [
            {
              type: 'form-item',
              props: { label: '角色', prop: 'role' },
              children: [
                {
                  type: 'select',
                  configKey: 'select',
                  field: 'role'
                }
              ]
            }
          ]
        },
        {
          type: 'col',
          props: { span: 8 },
          children: [
            {
              type: 'form-item',
              props: { label: '创建日期', prop: 'createDate' },
              children: [
                {
                  type: 'date',
                  configKey: 'datePicker',
                  field: 'createDate'
                }
              ]
            }
          ]
        }
      ]
    },
    {
      type: 'row',
      props: { gutter: 20 },
      children: [
        {
          type: 'col',
          props: { span: 24 },
          children: [
            {
              type: 'form-item',
              props: { label: '备注', prop: 'remark' },
              children: [
                {
                  type: 'input',
                  configKey: 'textarea',
                  field: 'remark'
                }
              ]
            }
          ]
        }
      ]
    },
    {
      type: 'row',
      props: { gutter: 20 },
      children: [
        {
          type: 'col',
          props: { span: 24 },
          children: [
            {
              type: 'form-item',
              props: {},
              children: [
                {
                  type: 'button',
                  configKey: 'submitBtn',
                  props: {
                    onClick: handleSubmit
                  }
                },
                {
                  type: 'button',
                  configKey: 'resetBtn',
                  props: {
                    onClick: handleReset
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};
</script>

按需引入

<template>
  <w-select :easyConfigJsonVue="config" @update:modelValue="handleModelValueUpdate">
    <template #header>
      <el-button type="primary" size="small">此处为header插槽</el-button>
    </template>
    <template #footer>
      <el-button type="primary" size="small">此处为footer插槽</el-button>
    </template>
  </w-select>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import WSelect from '@/components/w-select/index-page.vue';

const config = ref({
  component: 'ElSelect',
  modelValue: '',
  props: {
    placeholder: '请选择'
  },
  //常规写法
  options: [
    {
      component: 'ElOption',
      props: {
        label: '选项1',
        value: 'option1'
      }
    },
    {
      component: 'ElOption',
      props: {
        label: '选项2',
        value: 'option2'
      }
    },
    {
      component: 'ElOption',
      props: {
        label: '选项3',
        value: 'option3'
      }
    }
  ],
  events: {
    change: (value: { easyConfigJsonVue: { modelValue: string } }) => console.log('change', value),
    focus: () => console.log('focus'),
    'remove-tag': (tag: { easyConfigJsonVue: { modelValue: string } }) =>
      console.log('remove-tag', tag)
  }
});

const handleModelValueUpdate = (value: string) => {
  config.value.modelValue = value;
};
</script>

如果你只需要使用特定组件，可以单独引入：

组件列表

• WEasyConfigJsonVue: 配置化表单组件
• WSelect: 选择器组件
• WInput: 输入框组件
• WDatePicker: 日期选择器组件
• WButton: 按钮组件

TypeScript 支持

组件库默认提供 TypeScript 类型支持，无需额外配置。

许可证

MIT

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint