icarys-fc-vant 1.0.16 → 1.0.18

package/README.md

@@ -1,144 +1,170 @@
-# icarys-fc-vant
+# @icarys/fc-vant
 
-基于 FormCreate 和 Vant 的低代码表单生成器
+基于 FormCreate 和 Vant 的移动端低代码表单组件库
 
-## 安装
+## 特性
 
-```bash
-npm install icarys-fc-vant
-```
+- 🚀 基于 Vue 3 + Vant 4
+- 📱 专为移动端优化
+- 🎯 通过 JSON 配置生成表单
+- 🔧 支持动态渲染、数据收集、验证和提交
+- 📦 开箱即用，简单易集成
 
-## 使用方式
-
-### 1. 推荐使用方式（完整功能）
+## 安装
 
-由于复杂的JSX组件依赖，推荐直接使用官方包：
+```bash
+# 安装组件库
+npm install @icarys/fc-vant
 
-```javascript
-import formCreate from '@form-create/vant'
+# 安装必需的依赖（Vue 3 和 Vant）
+npm install vue@^3.1.0 vant@^4.0.0
 ```
 
-### 2. 工具函数使用
 
-如果你只需要工具函数，可以使用这个包：
+## 使用
 
-```javascript
-// CommonJS
-const { parseJson, toJson, toArray } = require('icarys-fc-vant');
+### 基础用法
 
-// ESM
-import { parseJson, toJson, toArray } from 'icarys-fc-vant';
-```
+#### 方法1：在模板中使用组件
 
-### 3. 基础API使用
+#### 导入使用
 
 ```javascript
-// 获取FormCreate实例
-import { formCreateMobile, createFormCreate } from 'icarys-fc-vant';
-
-const fc = createFormCreate();
-// fc.component('custom-component', CustomComponent);
+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)
+})
 ```
 
-## API 参考
-
-### FormCreate API
-
-#### formCreateMobile
-FormCreate移动端实例（基础实现）
-
-#### createFormCreate()
-创建FormCreate工厂函数
+#### 使用工具方法
 
 ```javascript
-const fc = createFormCreate();
-fc.component('name', Component); // 注册组件
-fc.componentAlias({ alias: 'realName' }); // 设置别名
-```
+import formCreate from '@icarys/fc-vant'
 
-### 工具函数
+// 解析JSON规则
+const rules = formCreate.jsonParse('[{"type":"input","field":"name"}]')
 
-#### parseJson(str)
-解析JSON字符串为对象
+// 序列化对象为JSON
+const jsonString = formCreate.jsonStringify(rules)
 
-```javascript
-const option = parseJson('{"title": "表单标题"}');
-// {title: "表单标题"}
+// 创建表单
+const $f = formCreate.create(rules)
 ```
 
-#### toJson(obj)
-将对象转换为JSON字符串
+### 在 Vue 组件中使用
 
-```javascript
-const jsonString = toJson({title: "表单标题"});
-// '{"title":"表单标题"}'
-```
-
-#### toArray(val)
-将值转换为数组
+```vue
+<template>
+  <div>
+    <div id="form-container"></div>
+  </div>
+</template>
 
-```javascript
-toArray('test'); // ['test']
-toArray(['a', 'b']); // ['a', 'b']
+<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>
 ```
 
-#### toString(val)
-将值转换为字符串
+## API
 
-```javascript
-toString(null); // ''
-toString(123); // '123'
-```
+### formCreateMobile(rule, options)
 
-#### extend(target, ...sources)
-对象扩展函数
+创建表单实例
 
-```javascript
-extend({}, {a: 1}, {b: 2}); // {a: 1, b: 2}
-```
+- `rule`: 表单配置规则数组
+- `options`: 配置选项
 
-## 在Vue中使用
+返回表单实例对象，包含以下方法：
 
-```vue
-<template>
-  <!-- 由于JSX复杂性，推荐使用 @form-create/vant -->
-  <div>使用 @form-create/vant 获取完整功能</div>
-</template>
+- `mount(selector)`: 挂载到DOM元素
+- `destroy()`: 销毁表单实例
+- `resetFields()`: 重置表单
+- `validate()`: 验证表单
+- `getValue()`: 获取表单值
+- `setValue(data)`: 设置表单值
 
-<script setup>
-import { parseJson } from 'icarys-fc-vant'
+## 支持的组件类型
 
-// 仍然可以使用工具函数
-const option = parseJson('{"title": "表单标题"}')
-</script>
-```
+- input - 输入框
+- textarea - 文本域
+- select - 下拉选择
+- radio - 单选框
+- checkbox - 多选框
+- switch - 开关
+- datePicker - 日期选择器
+- timePicker - 时间选择器
+- calendar - 日历
+- uploader - 文件上传
+- cascader - 级联选择
 
 ## 依赖要求
 
-- Vue 3.1.0+
-- Vant 4.9+
-
-## 注意事项
+- Vue ^3.1.0
+- Vant ^4.0.0
 
-1. **JSX组件支持**: 由于JSX组件的复杂依赖关系，这个包提供了基础的FormCreate API，但完整的表单组件功能需要使用 `@form-create/vant`
-
-2. **完整功能**: 如需完整的表单生成功能，请直接使用 `@form-create/vant` 包
-
-3. **工具函数**: 这个包的工具函数可以独立使用，无需依赖其他包
-
-## 从源码构建
+## 开发
 
 ```bash
-# 克隆源码
-git clone <your-repo>
-
 # 安装依赖
 npm install
 
-# 构建
-npm run build
+# 开发模式
+npm run dev
 
-# 构建产物在 dist/ 目录
+# 发布（直接发布源文件，无需构建）
+npm publish
 ```
 
 ## 许可证