icarys-fc-vant

VantUI版本低代码表单

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

安装

npm install icarys-fc-vant

使用

基础用法

import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import formCreate from 'icarys-fc-vant'

// 注册Vant组件
const app = createApp(App)
app.use(Vant)
app.use(formCreate)

<template>
  <formCreate
    :option="option"
    :rule="rule"
    v-model:api="fApi"
    v-model="formData"
  />
</template>

<script setup>
import { ref } from 'vue'
import formCreate from 'icarys-fc-vant'

const fApi = ref({})
const formData = ref({})

const option = ref({
  resetBtn: true
})

const rule = ref([
  {
    type: 'input',
    field: 'name',
    title: '姓名',
    value: '',
    props: {
      placeholder: '请输入姓名'
    }
  },
  {
    type: 'button',
    title: '',
    children: ['提交'],
    props: {
      type: 'primary'
    },
    on: {
      click: () => {
        console.log('提交表单', formData.value)
      }
    }
  }
])
</script>

直接使用组件

如果你不想使用插件方式注册，也可以直接导入组件使用：

<template>
  <formCreate
    :option="option"
    :rule="rule"
    v-model:api="fApi"
    v-model="formData"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FormCreate } from 'icarys-fc-vant'

const fApi = ref({})
const formData = ref({})

const option = ref({
  resetBtn: true
})

const rule = ref([
  {
    type: 'input',
    field: 'name',
    title: '姓名',
    value: '',
    props: {
      placeholder: '请输入姓名'
    }
  }
])
</script>

使用 parseJson 方法

import formCreate from 'icarys-fc-vant'

const jsonString = '[{"type":"input","field":"name","title":"姓名"}]'
const rule = formCreate.parseJson(jsonString)

API

详细API文档请参考：http://www.form-create.com/v3/

注意事项

• 本包不包含CSS样式，请手动引入Vant的样式文件
• 如需使用CSS样式，请在项目中引入：import 'vant/lib/index.css'

依赖

• Vue 3.1.0+
• Vant 4.9+

许可证

MIT