本页面描述了组件类 App Extension 使用的 JSON API Schema。如果您的 App Extension 包含 UI 组件，请阅读此页面。
TIP
您可能想了解 Index 脚本的 api.registerDescribeApi 方法。它的唯一目的是为 quasar describe CLI 命令提供钩子，让用户有额外的方式了解如何使用您的组件。
使用 JSON API 的好处
- 描述您现有的数据格式
- 提供清晰的人类和机器可读文档
- 验证数据，这对以下场景很有用：
- 自动化测试
- 确保提交数据的质量
JSON 数据结构
JSON 的核心建立在以下数据结构之上：
// object:
{ "key1": "value1", "key2": "value2" }
// array:
["first", "second", "third"]
// number:
42
3.1415926
// string:
"This is a string"
// boolean:
true
false
// null:
nullcontent_paste
Quasar JSON API
未填充的 schema 通常如下所示：
{
"props": {},
"events": {},
"slots": {},
"methods": {}
}content_paste
通用说明
定义的第一部分是实际的项目名称本身。
TIP
如果在 props 部分，这应该是面向外部的名称。也就是说，如果您描述的项目是 camelCase 格式，那么面向外部的名称应该是 kebab-case 格式。例如：myProp 变为 my-prop。
其余定义可以是以下之一：
| 名称 | 描述 |
|---|---|
| type | 除 props 外都是可选的。可以是单个值或数组。取值范围：["Array", "Boolean", "Function", "Number", "Object", "String", "Null", "Any"] |
| desc | 描述该项目的任意字符串 |
| required | [true,false] |
| values | 受约束的值数组。例如：[0, 0.5, 1.0, 1.5, 2.0] |
| definition | 描述对象定义。这是一个基本符合基础对象结构的对象。可以包含 "type"、"desc"、"required"、"examples"、"values" 和 "definition"（递归） |
| params | 通常用于描述函数的参数。需要一个或多个参数作为对象的键，该对象基本符合基础对象结构。可以包含 "type"、"desc"、"required"、"examples"、"values" 和 "definition"（递归） |
| returns | 返回值（用于方法或函数） |
| category | 用于分组 |
所有项目都是可选的，但至少应该提供一个描述。
Props 示例
"props": {
"value": {
"type": "Boolean",
"desc": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'input' event) OR use v-model directive",
"default": true,
"examples": [
"v-model=\"footerState\""
],
"category": "model"
},
"locale": {
"type": "Object",
"desc": "Locale formatting options",
"examples": [ ":locale=\"{ monthsShort: ['Ian', 'Feb', 'Mar', '...'] }\"" ],
"definition": {
"days": {
"type": "Array",
"desc": "List of full day names (DDDD), starting with Sunday",
"examples": [ "['Duminica', 'Luni', 'Marti', '...']" ]
},
"daysShort": {
"type": "Array",
"desc": "List of short day names (DDD), starting with Sunday",
"examples": [ "['Dum', 'Lun', 'Mar', '...']" ]
},
"months": {
"type": "Array",
"desc": "List of full month names (MMMM), starting with January",
"examples": [ "['Ianuarie', 'Februarie', 'Martie', '...']" ]
},
"monthsShort": {
"type": "Array",
"desc": "List of short month names (MMM), starting with January",
"examples": [ "['Ian', 'Feb', 'Mar', '...']" ]
}
},
"category": "model"
},
"options": {
"type": "Function",
"desc": "Optionally configure what time is the user allowed to set; Overridden by 'hour-options', 'minute-options' and 'second-options' if those are set",
"params": {
"hr": {
"type": "Number",
"desc": "Hour",
"examples": [ 15 ]
},
"min": {
"type": "Number",
"desc": "Minutes",
"examples": [ 38 ]
},
"sec": {
"type": "Number",
"desc": "Seconds",
"examples": [ 12 ]
}
},
"returns": null,
"examples": [
":options=\"(hr, min, sec) => hr <= 6\""
],
"category": "behavior"
},
"events": {
"type": [ "Array", "Function" ],
"desc": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not)",
"examples": [
":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"",
":events=\"date => date[9] % 3 === 0\""
],
"category": "model"
}
}content_paste
Events 示例
"events": {
"show": {
"desc": "Emitted after component has triggered show()",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"input": {
"params": {
"value": {
"type": "String"
},
"reason": {
"type": "String",
"desc": "Reason of the user interaction (what was picked)",
"values": [ "year", "month", "day", "today", "locale", "mask" ]
},
"details": {
"type": "Object",
"desc": "Object of properties on the new model",
"definition": {
"year": {
"type": "Number"
},
"month": {
"type": "Number"
},
"day": {
"type": "Number"
}
}
}
}
}
}content_paste
Slots 示例
"slots": {
"default": {
"desc": "This is where Banner content goes"
},
"avatar": {
"desc": "Slot for displaying an avatar (suggestions: QIcon, QAvatar)"
},
"selected-item": {
"desc": "Override default selection slot; Suggestion: QChip",
"scope": {
"index": {
"type": "Number",
"desc": "Selection index",
"examples": [ 0 ]
},
"opt": {
"type": "Any",
"desc": "Selected option -- its value is taken from model"
},
"selected": {
"type": "Boolean",
"desc": "Always true -- passed down as prop to QItem (when using QItem)"
},
"removeAtIndex": {
"type": "Function",
"desc": "Remove selected option located at specific index",
"params": {
"index": {
"type": "Number",
"required": true,
"desc": "Index at which to remove selection",
"examples": [ 0 ]
}
},
"returns": null
},
"toggleOption": {
"type": "Function",
"desc": "Add/remove option from model",
"params": {
"opt": {
"type": "Any",
"required": true,
"desc": "Option to add to model",
"__exemption": [ "examples" ]
}
},
"returns": null
},
"tabindex": {
"type": "Number",
"desc": "Tabindex HTML attribute value associated with respective option",
"values": [ 0, -1 ]
}
}
}
},content_paste
Methods 示例
"methods": {
"focus": {
"desc": "Focus on first focusable element/component in the form"
},
"validate": {
"desc": "Triggers a validation on all applicable inner Quasar components",
"params": {
"shouldFocus": {
"type": "Boolean",
"desc": "Tell if it should focus or not on component with error on submitting form; Overrides 'no-focus-error' prop if specified"
}
},
"returns": {
"type": "Promise<boolean>",
"desc": "Promise is always fulfilled and receives the outcome (true -> validation was a success, false -> invalid models detected)",
"examples": [
"validate().then(outcome => { ... })"
]
}
}
}content_paste