icarys-fc-vant 1.0.15 → 1.0.17

package/README.md

@@ -13,241 +13,76 @@
 ## 安装
 
 ```bash
-# 安装组件库（包含预构建文件）
-npm install icarys-fc-vant
+# 安装组件库
+npm install @icarys/fc-vant
 
-# 安装必需的依赖
+# 安装必需的依赖（Vue 3 和 Vant）
 npm install vue@^3.1.0 vant@^4.0.0
 ```
 
-## 使用方式
-
-### 在Vue模板中使用
-
-```vue
-<template>
-  <form-create
-    :disabled="disabled"
-    :rule="rule"
-    v-model="_value"
-    :option="option"
-    ref="formRef"
-    v-model:api="fapi"
-  />
-</template>
-
-<script>
-import formCreate from 'icarys-fc-vant'
-
-export default {
-  data() {
-    return {
-      disabled: false,
-      _value: {},
-      rule: [
-        { type: 'input', field: 'name', title: '姓名' }
-      ],
-      option: {},
-      fapi: null
-    }
-  },
-  created() {
-    // 解析配置 - 按照您的方式使用
-    this.option = formCreate.parseJson(this.config?.option || '{}')
-    this.rule = formCreate.parseJson(this.config?.rule || '[]')
-  }
-}
-</script>
-```
-
-### 编程式使用
-
-```javascript
-import formCreate from 'icarys-fc-vant'
-
-// 解析配置
-const option = formCreate.parseJson(props.config.option)
-const rule = formCreate.parseJson(props.config.rule)
-
-// 创建表单实例
-const $f = formCreate(rule, option)
-$f.mount('#form-container')
-```
 
 ## 使用
 
-### 在Vue组件中使用
+### 基础用法
 
-#### 模板中使用组件
+#### 方法1：在模板中使用组件
 
-```vue
-<template>
-  <div>
-    <!-- 在模板中使用组件 -->
-    <FormCreate
-      ref="formCreateRef"
-      :rule="rule"
-      :option="option"
-    />
-    <van-button @click="handleSubmit">提交表单</van-button>
-  </div>
-</template>
+#### 导入使用
 
-<script>
+```javascript
 import Vue from 'vue'
 import Vant from 'vant'
 import 'vant/lib/index.css'
-import formCreate from 'icarys-fc-vant'
-import FormCreate from './components/FormCreate.vue'
+import formCreate from '@icarys/fc-vant'
 
 Vue.use(Vant)
 
-export default {
-  components: {
-    FormCreate
-  },
-  data() {
-    return {
-      rule: [
-        {
-          type: 'input',
-          field: 'name',
-          title: '姓名',
-          props: {
-            placeholder: '请输入姓名'
-          }
-        },
-        {
-          type: 'select',
-          field: 'city',
-          title: '城市',
-          options: [
-            { label: '北京', value: 'beijing' },
-            { label: '上海', value: 'shanghai' }
-          ]
-        }
-      ],
-      option: {
-        // 表单配置选项
-      }
-    }
-  },
-  methods: {
-    handleSubmit() {
-      // 使用组件方法
-      this.$refs.formCreateRef.submit().then(data => {
-        console.log('表单数据:', data)
-      }).catch(error => {
-        console.error('验证失败:', error)
-      })
-    },
-
-    // 使用formCreate的工具方法
-    loadFormFromJson(jsonString) {
-      try {
-        const rules = formCreate.parseJson(jsonString)
-        this.rule = rules
-      } catch (error) {
-        console.error('解析JSON失败:', error)
-      }
-    },
-
-    // 序列化表单规则
-    saveFormToJson() {
-      const jsonString = formCreate.stringifyJson(this.rule)
-      console.log('表单JSON:', jsonString)
-      return jsonString
-    }
-  }
-}
-</script>
-```
-
-#### Composition API中使用
-
-```vue
-<template>
-  <div>
-    <FormCreate
-      ref="formCreateRef"
-      :rule="rule"
-      :option="option"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import formCreate from 'icarys-fc-vant'
-import FormCreate from './components/FormCreate.vue'
-
-// 使用formCreate的工具方法
-const loadForm = (jsonString) => {
-  try {
-    return formCreate.parseJson(jsonString)
-  } catch (error) {
-    console.error('解析失败:', error)
-    return []
-  }
-}
-
-const saveForm = (rules) => {
-  return formCreate.stringifyJson(rules)
-}
-
-// 表单数据
-const rule = ref([
+// 创建表单规则
+const rule = [
   {
     type: 'input',
     field: 'name',
-    title: '姓名'
+    title: '姓名',
+    props: {
+      placeholder: '请输入姓名'
+    }
+  },
+  {
+    type: 'select',
+    field: 'city',
+    title: '城市',
+    options: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' }
+    ]
   }
-])
+]
 
-const option = reactive({
-  // 配置选项
-})
+// 创建表单实例
+const $f = formCreate.create(rule)
 
-// 组件引用
-const formCreateRef = ref(null)
+// 挂载到DOM
+$f.mount('#form-container')
 
-// 提交表单
-const handleSubmit = async () => {
-  try {
-    const data = await formCreateRef.value.submit()
-    console.log('提交成功:', data)
-  } catch (error) {
-    console.error('提交失败:', error)
-  }
-}
-</script>
+// 或者提交表单
+$f.submit().then(data => {
+  console.log('表单数据:', data)
+})
 ```
 
-### 编程式使用
+#### 使用工具方法
 
 ```javascript
-import formCreate from 'icarys-fc-vant'
+import formCreate from '@icarys/fc-vant'
 
-// 1. 创建表单实例
-const $f = formCreate([
-  {
-    type: 'input',
-    field: 'name',
-    title: '姓名'
-  }
-])
-
-// 2. 挂载到DOM
-$f.mount('#form-container')
+// 解析JSON规则
+const rules = formCreate.jsonParse('[{"type":"input","field":"name"}]')
 
-// 3. 使用工具方法
-const jsonRules = formCreate.parseJson('[{"type":"input","field":"name"}]')
-const jsonString = formCreate.toJson(rules)
+// 序列化对象为JSON
+const jsonString = formCreate.jsonStringify(rules)
 
-// 4. 表单操作
-$f.submit().then(data => console.log(data))
-$f.validate().then(() => console.log('验证通过'))
-$f.resetFields()
+// 创建表单
+const $f = formCreate.create(rules)
 ```
 
 ### 在 Vue 组件中使用