@icarys/fc-vant

基于 FormCreate 和 Vant 的移动端低代码表单组件库

特性

• 🚀 基于 Vue 3 + Vant 4
• 📱 专为移动端优化
• 🎯 通过 JSON 配置生成表单
• 🔧 支持动态渲染、数据收集、验证和提交
• 📦 开箱即用，简单易集成

安装

# 安装组件库
npm install @icarys/fc-vant

# 安装必需的依赖（Vue 3 和 Vant）
npm install vue@^3.1.0 vant@^4.0.0

使用

基础用法

方法1：在模板中使用组件

导入使用

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import formCreate from '@icarys/fc-vant'

Vue.use(Vant)

// 创建表单规则
const rule = [
  {
    type: 'input',
    field: 'name',
    title: '姓名',
    props: {
      placeholder: '请输入姓名'
    }
  },
  {
    type: 'select',
    field: 'city',
    title: '城市',
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' }
    ]
  }
]

// 创建表单实例
const $f = formCreate.create(rule)

// 挂载到DOM
$f.mount('#form-container')

// 或者提交表单
$f.submit().then(data => {
  console.log('表单数据:', data)
})

使用工具方法

import formCreate from '@icarys/fc-vant'

// 解析JSON规则
const rules = formCreate.jsonParse('[{"type":"input","field":"name"}]')

// 序列化对象为JSON
const jsonString = formCreate.jsonStringify(rules)

// 创建表单
const $f = formCreate.create(rules)

在 Vue 组件中使用

<template>
  <div>
    <div id="form-container"></div>
  </div>
</template>

<script>
import { formCreateMobile } from '@icarys/fc-vant'

export default {
  mounted() {
    const rule = [
      {
        type: 'input',
        field: 'name',
        title: '姓名',
        props: {
          placeholder: '请输入姓名'
        }
      }
    ]

    const $f = formCreateMobile(rule)
    $f.mount('#form-container')
  }
}
</script>

API

formCreateMobile(rule, options)

创建表单实例

• rule: 表单配置规则数组
• options: 配置选项

返回表单实例对象，包含以下方法：

• mount(selector): 挂载到DOM元素
• destroy(): 销毁表单实例
• resetFields(): 重置表单
• validate(): 验证表单
• getValue(): 获取表单值
• setValue(data): 设置表单值

支持的组件类型

• input - 输入框
• textarea - 文本域
• select - 下拉选择
• radio - 单选框
• checkbox - 多选框
• switch - 开关
• datePicker - 日期选择器
• timePicker - 时间选择器
• calendar - 日历
• uploader - 文件上传
• cascader - 级联选择

依赖要求

• Vue ^3.1.0
• Vant ^4.0.0

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 发布（直接发布源文件，无需构建）
npm publish

许可证

MIT