icarys-fc-vant 1.0.3 → 1.0.4

package/README.md

@@ -13,139 +13,241 @@
 ## 安装
 
 ```bash
-# 安装组件库
-npm install @icarys/fc-vant
+# 安装组件库（包含预构建文件）
+npm install icarys-fc-vant
 
-# 安装必需的依赖（Vue 3 和 Vant）
+# 安装必需的依赖
 npm install vue@^3.1.0 vant@^4.0.0
 ```
 
-## 项目配置
+## 使用方式
 
-⚠️ **重要**: 此包包含源文件和JSX代码，您需要在项目中配置对JSX的支持：
+### 在Vue模板中使用
 
-### Vue CLI 项目
+```vue
+<template>
+  <form-create
+    :disabled="disabled"
+    :rule="rule"
+    v-model="_value"
+    :option="option"
+    ref="formRef"
+    v-model:api="fapi"
+  />
+</template>
 
-确保 `vue.config.js` 中配置了JSX：
+<script>
+import formCreate from 'icarys-fc-vant'
 
-```javascript
-// vue.config.js
-module.exports = {
-  configureWebpack: {
-    resolve: {
-      extensions: ['.js', '.jsx', '.vue']
+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>
 ```
 
-### Vite 项目
-
-确保 `vite.config.js` 中配置了对JSX的支持：
+### 编程式使用
 
 ```javascript
-// vite.config.js
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx() // 添加JSX支持
-  ]
-})
+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')
 ```
 
-### Webpack 项目
+## 使用
 
-在 `webpack.config.js` 中添加JSX支持：
+### 在Vue组件中使用
 
-```javascript
-module.exports = {
-  resolve: {
-    extensions: ['.js', '.jsx', '.vue']
+#### 模板中使用组件
+
+```vue
+<template>
+  <div>
+    <!-- 在模板中使用组件 -->
+    <FormCreate
+      ref="formCreateRef"
+      :rule="rule"
+      :option="option"
+    />
+    <van-button @click="handleSubmit">提交表单</van-button>
+  </div>
+</template>
+
+<script>
+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'
+
+Vue.use(Vant)
+
+export default {
+  components: {
+    FormCreate
   },
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env'],
-            plugins: ['@vue/babel-plugin-jsx']
+  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中使用
 
-#### 方法1：在模板中使用组件
-
-#### 导入使用
+```vue
+<template>
+  <div>
+    <FormCreate
+      ref="formCreateRef"
+      :rule="rule"
+      :option="option"
+    />
+  </div>
+</template>
 
-```javascript
-import Vue from 'vue'
-import Vant from 'vant'
-import 'vant/lib/index.css'
-import formCreate from '@icarys/fc-vant'
+<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 []
+  }
+}
 
-Vue.use(Vant)
+const saveForm = (rules) => {
+  return formCreate.stringifyJson(rules)
+}
 
-// 创建表单规则
-const rule = [
+// 表单数据
+const rule = ref([
   {
     type: 'input',
     field: 'name',
-    title: '姓名',
-    props: {
-      placeholder: '请输入姓名'
-    }
-  },
-  {
-    type: 'select',
-    field: 'city',
-    title: '城市',
-    options: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' }
-    ]
+    title: '姓名'
   }
-]
+])
 
-// 创建表单实例
-const $f = formCreate.create(rule)
+const option = reactive({
+  // 配置选项
+})
 
-// 挂载到DOM
-$f.mount('#form-container')
+// 组件引用
+const formCreateRef = ref(null)
 
-// 或者提交表单
-$f.submit().then(data => {
-  console.log('表单数据:', data)
-})
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    const data = await formCreateRef.value.submit()
+    console.log('提交成功:', data)
+  } catch (error) {
+    console.error('提交失败:', error)
+  }
+}
+</script>
 ```
 
-#### 使用工具方法
+### 编程式使用
 
 ```javascript
-import formCreate from '@icarys/fc-vant'
+import formCreate from 'icarys-fc-vant'
 
-// 解析JSON规则
-const rules = formCreate.jsonParse('[{"type":"input","field":"name"}]')
+// 1. 创建表单实例
+const $f = formCreate([
+  {
+    type: 'input',
+    field: 'name',
+    title: '姓名'
+  }
+])
+
+// 2. 挂载到DOM
+$f.mount('#form-container')
 
-// 序列化对象为JSON
-const jsonString = formCreate.jsonStringify(rules)
+// 3. 使用工具方法
+const jsonRules = formCreate.parseJson('[{"type":"input","field":"name"}]')
+const jsonString = formCreate.toJson(rules)
 
-// 创建表单
-const $f = formCreate.create(rules)
+// 4. 表单操作
+$f.submit().then(data => console.log(data))
+$f.validate().then(() => console.log('验证通过'))
+$f.resetFields()
 ```
 
 ### 在 Vue 组件中使用