ViewElement 页面元素
1. 结构声明
- TS Declaration
- JSON Schema
class ViewElement extends Annotatable {
tag: string;
refNamespace?: string;
name: string = '';
staticClass?: string;
staticStyle?: string;
authDescription?: string;
slotTarget?: string;
slotScope?: string;
bindAttrs: Array<BindAttribute>;
bindEvents: Array<BindEvent>;
bindDirectives: Array<BindDirective>;
bindRoles: Array<string>;
bindStyles: Array<BindStyle>;
children: Array<ViewElement>;
}
{
"type": "object",
"properties": {
"composedBy": {
"type": "array",
"items": {
"type": "string"
}
},
"applyAnnotations": {
"type": "array",
"items": {
"$ref": "#/definitions/ApplyAnnotation"
}
},
"tag": {
"type": "string"
},
"refNamespace": {
"type": "string"
},
"name": {
"type": "string"
},
"staticClass": {
"type": "string"
},
"staticStyle": {
"type": "string"
},
"authDescription": {
"type": "string"
},
"slotTarget": {
"type": "string"
},
"slotScope": {
"type": "string"
},
"bindAttrs": {
"type": "array",
"items": {
"$ref": "#/definitions/BindAttribute"
}
},
"bindEvents": {
"type": "array",
"items": {
"$ref": "#/definitions/BindEvent"
}
},
"bindDirectives": {
"type": "array",
"items": {
"$ref": "#/definitions/BindDirective"
}
},
"bindRoles": {
"type": "array",
"items": {
"type": "string"
}
},
"bindStyles": {
"type": "array",
"items": {
"$ref": "#/definitions/BindStyle"
}
},
"children": {
"type": "array",
"items": {
"$ref": "#/definitions/ViewElement"
}
}
},
"required": [
"tag",
"name",
"bindAttrs",
"bindEvents",
"bindDirectives",
"bindRoles",
"bindStyles",
"children"
],
"additionalProperties": false
}
2. 节点示例
(1) 示例
AST 如下：
- JSON
- YAML
{
"concept": "ViewElement",
"tag": "u-button",
"name": "button_2",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "color",
"type": "string",
"value": "primary",
"playground": []
},
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "创 建",
"playground": []
}
],
"bindEvents": [
{
"concept": "BindEvent",
"name": "click",
"logics": [
{
"concept": "Logic",
"name": "click",
"params": [],
"returns": [],
"variables": [],
"body": [
{
"concept": "Start",
"label": "开始"
},
{
"uuid": "0550e0f6863a4d849ee643d16336e420",
"concept": "CallLogic",
"label": "弹出消息",
"calleeNamespace": "nasl.ui",
"calleeName": "showMessage",
"shortcut": true,
"arguments": [
{
"concept": "Argument",
"keyword": "text",
"expression": {
"concept": "StringLiteral",
"value": "点击了“创 建”按钮"
}
}
]
},
{
"concept": "End",
"label": "结束"
}
],
"playground": []
},
{
"concept": "Logic",
"name": "create",
"params": [],
"returns": [],
"variables": [],
"body": [
{
"concept": "Start",
"label": "开始"
},
{
"concept": "Assignment",
"label": "赋值",
"left": {
"concept": "Identifier",
"namespace": "",
"name": "input"
},
"right": {
"concept": "CallFunction",
"label": "调用逻辑",
"calleeNamespace": "nasl.util",
"calleeName": "Clone",
"arguments": [
{
"concept": "Argument",
"keyword": "obj",
"expression": {
"concept": "Identifier",
"namespace": "",
"name": "student"
}
}
]
}
},
{
"uuid": "43a14fc183ed4b1bab03a839ea7fce9f",
"concept": "CallLogic",
"label": "调用逻辑",
"calleeNamespace": "elements.saveModal_1.logics",
"calleeName": "open",
"arguments": []
},
{
"concept": "End",
"label": "结束"
}
],
"playground": []
}
]
}
],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
concept: ViewElement
tag: u-button
name: button_2
bindAttrs:
- concept: BindAttribute
name: color
type: string
value: primary
playground: []
- concept: BindAttribute
name: text
type: string
value: 创 建
playground: []
bindEvents:
- concept: BindEvent
name: click
logics:
- concept: Logic
name: click
params: []
returns: []
variables: []
body:
- concept: Start
label: 开始
- uuid: 0550e0f6863a4d849ee643d16336e420
concept: CallLogic
label: 弹出消息
calleeNamespace: nasl.ui
calleeName: showMessage
shortcut: true
arguments:
- concept: Argument
keyword: text
expression:
concept: StringLiteral
value: 点击了“创 建”按钮
- concept: End
label: 结束
playground: []
- concept: Logic
name: create
params: []
returns: []
variables: []
body:
- concept: Start
label: 开始
- concept: Assignment
label: 赋值
left:
concept: Identifier
namespace: ""
name: input
right:
concept: CallFunction
label: 调用逻辑
calleeNamespace: nasl.util
calleeName: Clone
arguments:
- concept: Argument
keyword: obj
expression:
concept: Identifier
namespace: ""
name: student
- uuid: 43a14fc183ed4b1bab03a839ea7fce9f
concept: CallLogic
label: 调用逻辑
calleeNamespace: elements.saveModal_1.logics
calleeName: open
arguments: []
- concept: End
label: 结束
playground: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
对应的代码如下：
- 文本化 NASL
- Natural TS
@(name = "button_2")
UButton {
color = 'primary',
text = '创 建',
onClick: [
logic click(event) {
nasl::ui::showMessage('点击了“创 建”按钮')
end
},
logic create(event) {
input = nasl::util::Clone(student)
$refs::saveModal_1::open()
end
},
],
}
$refs.button_2 = new UButton({
color: 'primary',
text: '创 建',
onClick: [
function click() {
nasl.ui.showMessage('点击了“创 建”按钮')
return;
},
function create() {
input = nasl.util.Clone(student)
$refs.saveModal_1.open()
return;
},
],
})
(2) 示例
AST 如下：
- JSON
- YAML
{
"concept": "ViewElement",
"tag": "u-modal",
"name": "modal_1",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "visible",
"type": "dynamic",
"expression": {
"concept": "Identifier",
"namespace": "",
"name": "modalVisible"
},
"rules": [],
"sync": true,
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "template",
"name": "template_1",
"slotTarget": "foot",
"slotScope": "",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "u-linear-layout",
"name": "linear_layout_1",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "justify",
"type": "string",
"value": "center",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "u-button",
"name": "button_1",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "color",
"type": "string",
"value": "primary",
"rules": [],
"playground": []
},
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "确 定",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
},
{
"concept": "ViewElement",
"tag": "u-button",
"name": "button_2",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "取 消",
"rules": [],
"playground": []
}
],
"bindEvents": [
{
"concept": "BindEvent",
"name": "click",
"logics": [
{
"concept": "Logic",
"name": "click",
"params": [],
"returns": [],
"variables": [],
"body": [
{
"concept": "Start",
"label": "开始"
},
{
"uuid": "bc414eb6611e417c92a25ca5c125a2ed",
"concept": "CallLogic",
"label": "调用逻辑",
"calleeNamespace": "elements.modal_1.logics",
"calleeName": "close",
"arguments": []
},
{
"concept": "End",
"label": "结束"
}
],
"playground": []
}
]
}
],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
]
}
]
},
{
"concept": "ViewElement",
"tag": "template",
"name": "template_2",
"slotTarget": "body",
"slotScope": "",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "u-text",
"name": "text_1",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "内容",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
]
},
{
"concept": "ViewElement",
"tag": "template",
"name": "template_3",
"slotTarget": "title",
"slotScope": "",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "u-text",
"name": "text_2",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "标题",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
]
}
]
}
concept: ViewElement
tag: u-modal
name: modal_1
bindAttrs:
- concept: BindAttribute
name: visible
type: dynamic
expression:
concept: Identifier
namespace: ""
name: modalVisible
rules: []
sync: true
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: template
name: template_1
slotTarget: foot
slotScope: ""
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: u-linear-layout
name: linear_layout_1
bindAttrs:
- concept: BindAttribute
name: justify
type: string
value: center
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: u-button
name: button_1
bindAttrs:
- concept: BindAttribute
name: color
type: string
value: primary
rules: []
playground: []
- concept: BindAttribute
name: text
type: string
value: 确 定
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
- concept: ViewElement
tag: u-button
name: button_2
bindAttrs:
- concept: BindAttribute
name: text
type: string
value: 取 消
rules: []
playground: []
bindEvents:
- concept: BindEvent
name: click
logics:
- concept: Logic
name: click
params: []
returns: []
variables: []
body:
- concept: Start
label: 开始
- uuid: bc414eb6611e417c92a25ca5c125a2ed
concept: CallLogic
label: 调用逻辑
calleeNamespace: elements.modal_1.logics
calleeName: close
arguments: []
- concept: End
label: 结束
playground: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
- concept: ViewElement
tag: template
name: template_2
slotTarget: body
slotScope: ""
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: u-text
name: text_1
bindAttrs:
- concept: BindAttribute
name: text
type: string
value: 内容
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
- concept: ViewElement
tag: template
name: template_3
slotTarget: title
slotScope: ""
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: u-text
name: text_2
bindAttrs:
- concept: BindAttribute
name: text
type: string
value: 标题
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
对应的代码如下：
- 文本化 NASL
- Natural TS
@(name = "modal_1")
UModal {
visible = modalVisible,
slotFoot = { () => [
@(name = "linear_layout_1")
ULinearLayout {
justify = 'center',
slotDefault = { () => [
@(name = "button_1")
UButton {
color = 'primary',
text = '确 定',
},
@(name = "button_2")
UButton {
text = '取 消',
onClick: [
logic click(event) {
$refs::modal_1::close()
end
},
],
},
] },
},
] },
slotBody = { () => [
@(name = "text_1")
UText {
text = '内容',
},
] },
slotTitle = { () => [
@(name = "text_2")
UText {
text = '标题',
},
] },
}
$refs.modal_1 = new UModal({
visible: sync(modalVisible),
slotFoot: () => [
$refs.linear_layout_1 = new ULinearLayout({
justify: 'center',
slotDefault: () => [
$refs.button_1 = new UButton({
color: 'primary',
text: '确 定',
}),
$refs.button_2 = new UButton({
text: '取 消',
onClick: [
function click() {
$refs.modal_1.close()
return;
},
],
}),
],
}),
],
slotBody: () => [
$refs.text_1 = new UText({
text: '内容',
}),
],
slotTitle: () => [
$refs.text_2 = new UText({
text: '标题',
}),
],
})
(3) 示例
AST 如下：
- JSON
- YAML
{
"concept": "ViewElement",
"tag": "van-list-view",
"name": "listView_1",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "dataSource",
"type": "dynamic",
"value": "",
"expression": {
"concept": "CallLogic",
"uuid": "12b52ad1a67840e2ba9abf951449ecde",
"calleeNamespace": "app.logics",
"calleeName": "loadAaaListView_1",
"typeArguments": [],
"arguments": [
{
"concept": "Argument",
"keyword": "page",
"expression": {
"concept": "MemberExpression",
"object": {
"concept": "MemberExpression",
"object": {
"concept": "Identifier",
"namespace": "",
"name": "elements"
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "$ce"
}
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "page"
}
}
},
{
"concept": "Argument",
"keyword": "size",
"expression": {
"concept": "MemberExpression",
"object": {
"concept": "MemberExpression",
"object": {
"concept": "Identifier",
"namespace": "",
"name": "elements"
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "$ce"
}
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "size"
}
}
}
]
},
"rules": [],
"playground": []
},
{
"concept": "BindAttribute",
"name": "pageSize",
"type": "static",
"value": "50",
"rules": [],
"playground": []
},
{
"concept": "BindAttribute",
"name": "pageNumber",
"type": "static",
"value": "1",
"rules": [],
"playground": []
},
{
"concept": "BindAttribute",
"name": "pageable",
"type": "string",
"value": "auto-more",
"rules": [],
"playground": []
},
{
"concept": "BindAttribute",
"name": "remotePaging",
"type": "static",
"value": "true",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "template",
"name": "template_19",
"slotTarget": "next",
"slotScope": "",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "van-text",
"name": "text_11",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "下一页",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
]
},
{
"concept": "ViewElement",
"tag": "template",
"name": "template_20",
"slotTarget": "prev",
"slotScope": "",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "van-text",
"name": "text_12",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "text",
"type": "string",
"value": "上一页",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
]
},
{
"concept": "ViewElement",
"tag": "template",
"name": "template_21",
"slotTarget": "item",
"slotScope": "current",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "van-cell",
"name": "cell_1",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "value",
"type": "dynamic",
"value": "",
"expression": {
"concept": "MemberExpression",
"object": {
"concept": "MemberExpression",
"object": {
"concept": "MemberExpression",
"object": {
"concept": "Identifier",
"namespace": "",
"name": "current"
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "item"
}
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "student"
}
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "name"
}
},
"rules": [],
"playground": []
},
{
"concept": "BindAttribute",
"name": "isLink",
"type": "string",
"value": "",
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "template",
"name": "template_22",
"slotTarget": "title",
"slotScope": "",
"bindAttrs": [],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": [
{
"concept": "ViewElement",
"tag": "van-text",
"name": "text_13",
"bindAttrs": [
{
"concept": "BindAttribute",
"name": "text",
"type": "dynamic",
"value": "",
"expression": {
"concept": "MemberExpression",
"object": {
"concept": "MemberExpression",
"object": {
"concept": "MemberExpression",
"object": {
"concept": "Identifier",
"namespace": "",
"name": "current"
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "item"
}
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "student"
}
},
"property": {
"concept": "Identifier",
"namespace": "",
"name": "name"
}
},
"rules": [],
"playground": []
}
],
"bindEvents": [],
"bindDirectives": [],
"bindRoles": [],
"bindStyles": [],
"children": []
}
]
}
]
}
]
}
]
}
concept: ViewElement
tag: van-list-view
name: listView_1
bindAttrs:
- concept: BindAttribute
name: dataSource
type: dynamic
value: ""
expression:
concept: CallLogic
uuid: 12b52ad1a67840e2ba9abf951449ecde
calleeNamespace: app.logics
calleeName: loadAaaListView_1
typeArguments: []
arguments:
- concept: Argument
keyword: page
expression:
concept: MemberExpression
object:
concept: MemberExpression
object:
concept: Identifier
namespace: ""
name: elements
property:
concept: Identifier
namespace: ""
name: $ce
property:
concept: Identifier
namespace: ""
name: page
- concept: Argument
keyword: size
expression:
concept: MemberExpression
object:
concept: MemberExpression
object:
concept: Identifier
namespace: ""
name: elements
property:
concept: Identifier
namespace: ""
name: $ce
property:
concept: Identifier
namespace: ""
name: size
rules: []
playground: []
- concept: BindAttribute
name: pageSize
type: static
value: "50"
rules: []
playground: []
- concept: BindAttribute
name: pageNumber
type: static
value: "1"
rules: []
playground: []
- concept: BindAttribute
name: pageable
type: string
value: auto-more
rules: []
playground: []
- concept: BindAttribute
name: remotePaging
type: static
value: "true"
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: template
name: template_19
slotTarget: next
slotScope: ""
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: van-text
name: text_11
bindAttrs:
- concept: BindAttribute
name: text
type: string
value: 下一页
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
- concept: ViewElement
tag: template
name: template_20
slotTarget: prev
slotScope: ""
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: van-text
name: text_12
bindAttrs:
- concept: BindAttribute
name: text
type: string
value: 上一页
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
- concept: ViewElement
tag: template
name: template_21
slotTarget: item
slotScope: current
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: van-cell
name: cell_1
bindAttrs:
- concept: BindAttribute
name: value
type: dynamic
value: ""
expression:
concept: MemberExpression
object:
concept: MemberExpression
object:
concept: MemberExpression
object:
concept: Identifier
namespace: ""
name: current
property:
concept: Identifier
namespace: ""
name: item
property:
concept: Identifier
namespace: ""
name: student
property:
concept: Identifier
namespace: ""
name: name
rules: []
playground: []
- concept: BindAttribute
name: isLink
type: string
value: ""
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: template
name: template_22
slotTarget: title
slotScope: ""
bindAttrs: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children:
- concept: ViewElement
tag: van-text
name: text_13
bindAttrs:
- concept: BindAttribute
name: text
type: dynamic
value: ""
expression:
concept: MemberExpression
object:
concept: MemberExpression
object:
concept: MemberExpression
object:
concept: Identifier
namespace: ""
name: current
property:
concept: Identifier
namespace: ""
name: item
property:
concept: Identifier
namespace: ""
name: student
property:
concept: Identifier
namespace: ""
name: name
rules: []
playground: []
bindEvents: []
bindDirectives: []
bindRoles: []
bindStyles: []
children: []
对应的代码如下：
- 文本化 NASL
- Natural TS
@(name = "listView_1")
VanListView {
dataSource = app::logics::loadAaaListView_1($currentElement.page, $currentElement.size),
pageSize = 50,
pageNumber = 1,
pageable = 'auto-more',
remotePaging = true,
slotNext = { () => [
@(name = "text_11")
VanText {
text = '下一页',
},
] },
slotPrev = { () => [
@(name = "text_12")
VanText {
text = '上一页',
},
] },
slotItem = { (current) => [
@(name = "cell_1")
VanCell {
value = current.item.student.name,
isLink = '',
slotTitle = { () => [
@(name = "text_13")
VanText {
text = current.item.student.name,
},
] },
},
] },
}
$refs.listView_1 = new VanListView({
dataSource: app.logics.loadAaaListView_1(elements.$ce.page, elements.$ce.size),
pageSize: 50,
pageNumber: 1,
pageable: 'auto-more',
remotePaging: true,
slotNext: () => [
$refs.text_11 = new VanText({
text: '下一页',
}),
],
slotPrev: () => [
$refs.text_12 = new VanText({
text: '上一页',
}),
],
slotItem: (current) => [
$refs.cell_1 = new VanCell({
value: current.item.student.name,
isLink: '',
slotTitle: () => [
$refs.text_13 = new VanText({
text: current.item.student.name,
}),
],
}),
],
})