§ Fox3.0前端框架-指令(PC篇)
标签（空格分隔）： Fox
§ 前言
提供了脚本控制UI界面的机制
§ 指令
指令结构
{
type: '指令类型',
target: 'model名',
name: '指令名称',
args: '指令值',
}
1
2
3
4
5
6
2
3
4
5
6
§ 属性指令
可设置对应model name的组件的属性
§ 结构
{
type: 'property',
target: 'model名',
name: '属性名',
args: '属性值',
}
1
2
3
4
5
6
2
3
4
5
6
§ 例子
{
type: 'property',
target: 'val',
name: 'disabled',
args: true,
}
1
2
3
4
5
6
2
3
4
5
6
§ 方法指令
可调用对应model name的组件的方法
§ 结构
{
type: 'method',
target: 'model名',
name: '方法名',
args: '方法参数列表',
}
1
2
3
4
5
6
2
3
4
5
6
§ 例子
{
type: 'method',
target: 'val',
name: 'focus',
}
1
2
3
4
5
2
3
4
5
§ 值指令
可设置对应model name的值
§ 结构
{
type: 'value',
target: 'model名',
name: '',
args: '值',
}
1
2
3
4
5
6
2
3
4
5
6
§ 例子
{
type: 'value',
target: 'val',
name: '',
args: '123',
}
1
2
3
4
5
6
2
3
4
5
6
§ 执行指令API
§ 方法
vm.execScript
参数说明
| 参数 | 类型 | 说明 |
|---|---|---|
| scripts | Array<json> | 脚本数组 |
§ 例子
//定义脚本列表
let scripts = [
{
type: 'property',
target: 'val',
name: 'readonly',
args: true,
},
{
type: 'value',
target: 'val',
name: '',
args: 1,
},
{
type: 'property',
target: 'val2',
name: 'disabled',
args: true,
},
{
type: 'value',
target: 'val3',
name: '',
args: '哈哈',
},
{
type: 'method',
target: 'val3',
name: 'focus',
args: '',
},
]
//执行脚本
this.execScript(scripts)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
← 三十六计(PC篇) EventChain →