@nangxif/json-schema NPM

JSON-SCHEMA

使用方法

// 安装
npm i @nangxif/json-schema -S

import Jsonschema form '@nangxif/json-schema';
import "@nangxif/json-schema/dist/css/common.css";

<Jsonschema
  :schema="dataJson"
  :tool="tool"
  @upData="upData"
></Jsonschema>

参数	作用	值	必填	备注
:schema	传入的json数据入口	符合规则的json	true
:tool	工具栏的配置，目前工具栏的工具有1.控制label与输入框的相对位置上下，左右，键值为leftandright，默认值为true，表示左右；2.控制可编辑与不可编辑，键值为canEdit，默认值为true，表示可编辑。	{leftandright:Boolean,canEdit:Boolean}	false	leftandright和canEdit可设置可不设置
@upData	生成的json数据出口	一个接收函数upData(val){//val为最后生成的值}	true

传入的json的格式是怎样的？

1.元素的类型

对象类型，数组类型，数字类型，字符串类型。

①对象类型，数组类型，数字类型，字符串类型共有属性

属性名称	类型	备注
type	string	类型
title	string	展示名称
description	string	描述
default	string	默认值

②对象类型特有属性

属性名称	类型	备注
properties	object	属性
additionalProperties	array	定义对象里面的属性或者对象

③数组类型特有属性

(1)数组类型一类特有属性

一类指的是该数组里面包含还有其他的组件，items属性里面表示的就是里面包含的组件。

属性名称	类型	备注
minItems	number	最小item数
maxItems	number	最大item数
uniqueItems	number	确保数组中的每个项目都是唯一的默认：false
items	object	数组每项的内容
additionalItems	boolean	是否可以额外增加item

(2)数组类型二类特有属性

二类指的是该数组就是对应一个组件了，一般这个组件是radio、select或者checkbox，可能后续还会有其他产生的值为数组的组件，与一类的区别是，这类数组类型有enum和enumNames属性

属性名称	类型	备注
enum	array	组件选项的value值
enumNames	array	组件选项的key值，元素数量与enum一致
extra	object	同下，但是一般对应的component_type是radio组件、select组件或checkbox组件

④数字类型和字符串类型特有属性

属性名称	类型	对象的属性
extra	object	component_type:"组件的类型"stringcomponent_attrs:"组件的属性"stringvalidation:"组件的表单校验"array

2.组件的类型

组件类型component_type基本继承elementUI的表单组件，包括：

Checkbox、DatePicker、Input、InputNumber、Radio、Select、TimePicker

组件	组件最终生成的值的类型
Checkbox	array
DatePicker	string
Input	string
InputNumber	number
Radio	string
Select	array
TimePicker	string

3.表单验证validation

键	值	用途	是否必填
type	required、minLength、maxLength、minimum、maximum、pattern、customValidate	验证方式	true
message	eg:“必填”	表单验证错误显示的提示	true
param	/	type对应的验证方式	false

下面有几个例子

{
  "type":"required",
  "message":"必填"
}

{
  "type":"minLength",
  "message":"长度不能小于10",
  "param":"10"
}

{
  "type":"maxLength",
  "message":"长度不能超过10",
  "param":"10"
}

{
  "type": "minimum",
  "message": "值不能小于10",
  "param":"10"
}

{
  "type": "maximum",
  "message": "值不能大于50",
  "param":"50"
}

{
   "type": "pattern",
   "message": "正则不匹配",
   "param": "(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]"
}

{
    "type": "customValidate",
    "message": "我是自定义错误提示",
    "param": {
      "type": "js",
      "source": "function validateRule(value) {\nreturn false\n }",
      "compiled": "function main(){\n    \"use strict\";\n\nvar __compiledFunc__ = function validateRule(value) {\n  return false;\n};\n    return __compiledFunc__.apply(this, arguments);\n  }",
      "error": {}
    }
}

这部分的内容还不完整，继续撰写中……

具体开发方式请访问github

json-schema element-ui

@everything-registry/sub-chunk-632 @infinitebrahmanuniverse/nolb-_nan

4 years ago

4 years ago

4 years ago

4 years ago