itform 0.0.1

package/README.md

@@ -0,0 +1,185 @@
+# Variant Form
+
+#### 一款高效的 Vue 低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。
+
+![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)
+
+<br/>
+
+### 功能一览
+
+```
+> 拖拽式可视化表单设计；
+> 支持PC、Pad、H5三种布局；
+> 支持运行时动态加载表单；
+> 支持表单复杂交互控制；
+> 支持自定义CSS样式；
+> 支持自定义校验逻辑；
+> 支持国际化多语言；
+> 兼容IE 11浏览器；
+> 可导出Vue组件、HTML源码；
+> 可导出Vue的SFC单文件组件；
+> 支持开发自定义组件；
+> 支持响应式自适应布局；
+> 支持VS Code插件；
+> 更多功能等你探究...；
+```
+
+### 安装依赖
+
+```
+npm install --registry=https://registry.npmmirror.com
+```
+
+### 开发调试
+
+```
+npm run serve
+```
+
+### 生产打包
+
+```
+npm run build
+```
+
+### 表单设计器 + 表单渲染器打包
+
+```
+npm run lib
+```
+
+### 表单渲染器打包
+
+```
+npm run lib-render
+```
+
+### 浏览器兼容性
+
+`Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11`
+
+<br/>
+
+### 跟 Vue 项目集成
+
+<br/>
+
+#### 1. 安装包
+
+```bash
+npm i itform
+```
+
+或
+
+```bash
+yarn add itform
+```
+
+<br/>
+
+#### 2. 引入并全局注册 VForm 组件
+
+```javascript
+import Vue from "vue";
+import App from "./App.vue";
+
+import ElementUI from "element-ui"; //引入element-ui库
+import itform from "itform"; //引入VForm库
+
+import "element-ui/lib/theme-chalk/index.css"; //引入element-ui样式
+import "itform/lib/itform.css"; //引入VForm样式
+
+Vue.config.productionTip = false;
+
+Vue.use(ElementUI); //全局注册element-ui
+Vue.use(itform); //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");
+```
+
+<br/>
+
+#### 3. 在 Vue 模板中使用表单设计器组件
+
+```html
+<template>
+  <v-form-designer></v-form-designer>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {};
+    },
+  };
+</script>
+
+<style lang="scss">
+  body {
+    margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
+  }
+</style>
+```
+
+<br/>
+
+#### 4. 在 Vue 模板中使用表单渲染器组件
+
+```html
+<template>
+  <div>
+    <v-form-render
+      :form-json="formJson"
+      :form-data="formData"
+      :option-data="optionData"
+      ref="vFormRef"
+    >
+    </v-form-render>
+    <el-button type="primary" @click="submitForm">Submit</el-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formJson: {
+          widgetList: [],
+          formConfig: {
+            labelWidth: 80,
+            labelPosition: "left",
+            size: "",
+            labelAlign: "label-left-align",
+            cssCode: "",
+            customClass: "",
+            functions: "",
+            layoutType: "PC",
+            onFormCreated: "",
+            onFormMounted: "",
+            onFormDataChange: "",
+          },
+        },
+        formData: {},
+        optionData: {},
+      };
+    },
+    methods: {
+      submitForm() {
+        this.$refs.vFormRef
+          .getFormData()
+          .then((formData) => {
+            // Form Validation OK
+            alert(JSON.stringify(formData));
+          })
+          .catch((error) => {
+            // Form Validation failed
+            this.$message.error(error);
+          });
+      },
+    },
+  };
+</script>
+```