MeowForm 表单库

安装

npm install meow-form --save
# 或
yarn add meow-form

快速开始

main.js

import { createApp } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import App from "./App.vue";
import MeowForm from "meow-form";
import "meow-form/dist/index.css";

const app = createApp(App);

app.use(Antd);
app.use(MeowForm);

app.mount("#app");

FormDesigner 示例

<template>
  <form-designer
    :height="'100vh'"
    :initialFormData="initialData"
    @save-form="handleSave"
  />
</template>
<script setup>
const initialData = {
  globalConfig: {
    formTitle: "用户信息表单",
    labelWidth: 100,
    labelPosition: "left",
  },
  components: [
    {
      id: "name",
      type: "input",
      attr: {
        label: "姓名",
        key: "name",
        placeholder: "请输入姓名",
      },
    },
  ],
};
const handleSave = (formData) => {
  console.log("保存表单:", formData);
};
</script>

FormBuilder 示例

<template>
  <form-builder :formData="formData" @submit="handleSubmit" />
</template>
<script setup>
const formData = {
  globalConfig: {
    formTitle: "用户注册",
    labelWidth: 100,
    labelPosition: "top",
  },
  components: [
    {
      id: "username",
      type: "input",
      attr: {
        label: "用户名",
        key: "username",
        rules: [{ required: true, message: "用户名不能为空" }],
      },
    },
  ],
};
const handleSubmit = (values) => {
  console.log("提交数据:", values);
};
</script>

FormDesigner Props

| 参数名 | 类型 | 默认值 | 说明 | | ------------------------- | ------- | ------- | ------------------ | | height | String | '100vh' | 设计器高度 | | responsive | Boolean | true | 是否启用响应式适配 | | initialFormData | Object | null | 初始表单数据 | | hideSaveButton | Boolean | false | 是否隐藏保存按钮 | | libraryDisabled | Boolean | false | 是否禁用组件库 | | libraryDisabledComponents | Array | [] | 禁用的组件类型列表 |

FormDesigner Methods

| 方法名 | 参数 | 说明 | | ------------------ | ----------------- | ------------------ | | getFormData | - | 获取完整表单配置 | | saveForm | - | 手动保存表单 | | setFormData | formData: Object | 设置表单数据 | | clearForm | - | 清空表单设计器 | | validate | - | 验证表单配置 | | setLibraryDisabled | disabled: Boolean | 设置组件库禁用状态 |

FormDesigner Events

| 事件名 | 参数 | 说明 | | ---------------- | ------------------- | ------------------ | | save-form | formData: Object | 保存表单时触发 | | change | formData: Object | 表单配置变化时触发 | | component-add | component: Object | 添加组件时触发 | | component-remove | componentId: String | 删除组件时触发 |

FormBuilder Props

| 参数名 | 类型 | 默认值 | 说明 | | -------------- | ------- | ------- | ------------------ | | formData | Object | {} | 完整的表单配置数据 | | submitText | String | '提交' | 提交按钮文本 | | resetText | String | '重置' | 重置按钮文本 | | showSubmit | Boolean | true | 是否显示提交按钮 | | showReset | Boolean | true | 是否显示重置按钮 | | buttonPosition | String | 'right' | 按钮位置 | | disabled | Boolean | false | 表单是否禁用 | | readOnly | Boolean | false | 表单是否制度 |

FormBuilder Methods

| 方法名 | 参数 | 说明 | | ------------ | ------------ | ---------------------- | | validateForm | - | 验证表单，返回验证结果 | | getFormData | - | 获取表单当前数据 | | setFormData | data: Object | 设置表单数据 | | initForm | - | 重新初始化表单 |

FormBuilder Events

| 事件名 | 参数 | 说明 | | ------------- | ------------------ | ------------------ | | submit | formData: Object | 表单提交时触发 | | reset | - | 表单重置时触发 | | change | formValues: Object | 表单值变化时触发 | | finish | values: Object | 表单验证通过时触发 | | finish-failed | errorInfo: Object | 表单验证失败时触发 |

备注

node_modules可能有缓存，有时候需要删除更新