@hzab/form-render-mobile

@hzab/form-render-mobile

组件模板

• node@16.x

注意

• Upload 拍照需要用到 cordova 插件，通过 props.getImgOpt.isMediaCapturePlugin, props.getImgOpt.isCameraPlugin 配置
  • isMediaCapturePlugin cordova 插件: cordova-plugin-media-capture
  • isCameraPlugin cordova 插件: cordova-plugin-camera

组件

示例

import { useRef } from "react";
import FormRender from "@hzab/form-render-mobile";

import Schema from "./test.schema.json";

export default () => {
  const formRef = useRef({
    formRender: Object,
  });

  function onClick() {
    console.log(JSON.stringify(formRef?.current?.formRender.values));
  }

  return (
    <div>
      <FormRender ref={formRef} schema={Schema} initialValues={ipt:'xxxxssss'} />
      <button onClick={onClick}>提交</button>
    </div>
  );
};

API

InfoPanel Attributes

参数	类型	必填	默认值	说明
schema	Object	是	-	数据信息的 schema
className	string	否	-	元素类名
colon	string/false	否	：	设置 label 后面的符号
initialValues	Object	否	-	表单初始值
schemaScope	Object	否	-	formily scope 自定义数据
components	SchemaReactComponents	否	-	formily 自定义组件
readOnly	boolean	否	-	是否只读
disabled	boolean	否	-	是否禁用
formOptions	Object	否	-	createForm 配置项
hasSubmit	boolean	否	-	是否有提交按钮
onSubmit	Function	否	-	提交事件 (values): void
init	Function	否	-	组件初始化 (form): void
axios	Object	否	-	axios
axiosConf	Object	否	-	axios config
footerRender	Function	否	-	底部渲染插槽 (): ReactElement

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码
• lib 组件打包编译后的代码

命令

• Mac 执行该命令，设置 pre-commit 为可执行文件

  • npm run mac-chmod
  • chmod +x .husky && chmod +x .husky/pre-commit

• 生成文档：npm run docs

• 本地运行：npm run dev

• 打包编译：npm run build

发布

• 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！

• 编译组件：npm run build

• 命令：npm publish --access public

• 发布目录：

  • lib
  • src

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js