頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

阿里跨組件體系的JSON表單渲染引擎FormRender

表單 HTML我幫您 2月前  次瀏覽
阿里跨組件體系的JSON表單渲染引擎FormRender通過 JSON Schema 生成標準 Form,常用于自定義搭建配置界面生成

支持 Ant Design 和 Fusion Design 主流的視覺主題
使用 JSON Schema 標準協議描述表單配置,并搭配豐富類型且可擴展的組件
支持 1 排 N、橫縱排、支持對象無限嵌套、自定義正則校驗、自定義樣式組件、列表拖拽等特性
已在淘寶、天貓、飛豬、亞博科技、安全智能、新零售行業工作臺、人工智能實驗室、安全智能部門等多 BU 多場景使用,簡單使用同時支持復雜場景使用

使用上有詳細文檔,維護上有專人支持

安裝

npm i form-render -S

快速使用

import React from "react";
import ReactDOM from "react-dom";
// 使用 Ant Design 體系
import FormRender from "form-render/lib/antd";

// 使用 Fusion Design 體系
// import "@alifd/next/dist/next.min.css";
// import FormRender from "form-render/lib/fusion";

// propsSchema 使用標準的 JSON Schema 來描述表單結構
const propSchema = {
  type: "object",
  properties: {
    dateDemo: {
      title: "時間",
      type: "string"
    }
  }
};

// uiSchema 可以增強展示類型的豐富性,如時間組件
const uiSchema = {
  dateDemo: {
    "ui:widget": "date"
  }
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      formData: {}
    };
  }

  // 數據變化回調
  onChange = value => {
    this.setState({
      formData: value
    });
  };

  // 數據格式校驗回調
  onValidate = list => {
    console.log(list);
  };

  render() {
    const { formData } = this.state;
    return (
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement); 

API

Prop Type Required Default Description
name String Y $form 表單的名稱
propsSchema Object Y {} 表單屬性配置 json
uiSchema Object N {} 表單 UI 配置 json
formData Object N {} 配置數據
onChange Function Y ()=>{} 數據更改回調函數
onValidate Function N ()=>{} 表單輸入校驗回調
displayType String N column 設置表單橫向排列或者縱向排序column/ row

注 1: 設置表單 displayType 為 row 時候,請設置 showDescIcon true,隱藏說明,效果會更好
注 2: onChange 方法會用于初始化表單 data,如果不寫會造成沒有初始值的表單元素無法渲染(出現不報錯也不顯示的情況)
注 3: FormRender 默認布局會占滿它的父級元素,建議用一個div包裹 FormRender 用于表單布局樣式調整

不常用 API

Prop Type Required Default Description
column Number 1 N 整體布局 1 排 N,局部的 1 排 N 一般使用ui:width
showValidate Boolean N true 是否展示校驗信息
showDescIcon Boolean N false 是否將文字形式說明顯示成描述 tooltip 形式
widgets Object N {} 自定義組件
mapping Object N {} 用于修改默認組件映射表
FieldUI Component N 內置組件 用于自定義整個元素的樣式(標簽、結構等)

原理

FormRender 底層引擎用原生 JS 來實現,通過解析 JSON Schema 配置,并支持渲染原生的 HTML 表單,通過 UiSchema 來配置 Widget 組件,在此基礎上處理好上層 Ant Design 或 Fusion 組件 Widget 和 Input Format 的對應關系,最后還可以做到無縫接入其他組件體系的好處


相關鏈接

發表評論

2017怎样手机上赚钱