Low Code Vant Form (Vue 3 Version)

基于 Vant 的动态表单组件，用于快速构建表单页面（Vue 3 版本）。

安装

npm install low-code-vantform

使用

全局注册

在 Vue 3 项目的入口文件（如 main.js）中添加：

import { createApp } from 'vue'
import LowCodeVantForm from 'low-code-vantform'
// 引入样式
import 'low-code-vantform/dist/style.css'

const app = createApp(App)
app.use(LowCodeVantForm)

局部注册

在组件中局部注册：

<template>
  <div>
    <van-dynamic-form 
      :schema="formSchema" 
      v-model:value="formData"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DynamicForm } from 'low-code-vantform'
// 引入样式
import 'low-code-vantform/dist/style.css'

const formData = ref({})
const formSchema = ref([
  {
    van: 'field',
    prop: 'name',
    label: '姓名',
    required: true
  }
])
</script>

使用组件

<template>
  <div>
    <van-dynamic-form 
      :schema="formSchema" 
      v-model:value="formData"
      v-model:valid="formValid"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})
const formValid = ref(false)
const formSchema = ref([
  {
    van: 'field',
    prop: 'name',
    label: '姓名',
    required: true
  }
])
</script>

组件属性

| 属性名 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | schema | 表单结构定义 | Array | [] | | value | 表单数据 | Object | {} | | valid | 表单验证状态 | Boolean | false |

组件事件

| 事件名 | 说明 | 参数 | | --- | --- | --- | | update:value | 表单数据变化时触发 | (value) | | update:valid | 表单验证状态变化时触发 | (valid) | | setNewKeyVal | 设置新键值对时触发 | (key, value) |

Vue 2 版本支持

如果你仍在使用 Vue 2，请安装 1.x 版本：

npm install low-code-vantform@^1.0.0

许可证

MIT