# 定制设计器
# 定制工具面板
# 隐藏工具面板
new Epage({
// 其他参数
panels: {
tool: false
}
})
1
2
3
4
5
6
2
3
4
5
6
# 定制顶部栏
# 隐藏顶栏
new Epage({
// 其他参数
panels: {
header: false
}
})
1
2
3
4
5
6
2
3
4
5
6
# 重写标题，控制操作按钮
new Epage({
// 其他参数
panels: {
header: {
left: {
render: ({ el }) => {
el.innerHTML = '自定义标题'
},
style: 'color: #2d8cf0;'
},
center: false,
right: {
schema: false,
logic: false
}
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 定制配置面板
# 隐藏配置面板
new Epage({
// 其他参数
panels: {
setting: false
}
})
1
2
3
4
5
6
2
3
4
5
6
# 扩展配置面板
new Epage({
// 其他参数
settings: [
{
key: 'custom',
name: '自定义',
component: (({ el, store }) => {
const pre = document.createElement('pre')
store.$$store.watch(
(state) => state.selectedSchema,
(selectedSchema) => {
pre.innerHTML = JSON.stringify(selectedSchema, null, 2)
el.innerHTML = pre.outerHTML
},
{ deep: true }
)
})
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 替换内置配置面板
new Epage({
// 其他参数
settings: [
{
key: 'style',
name: '样式',
component: (({ el, store }) => {
el.innerHTML = 'style panel'
})
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 精简设计器
new Epage({
// 其他参数
panels: {
header: false,
tool: false,
setting: false
}
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 完全自定义
const epage = new Epage({
// 其他参数
panels: {
header: false,
tool: false,
setting: false
}
})
const tool = document.getElementById('tool')
const setting = document.getElementById('setting')
// 自定义工具面板
new Vue({
el: tool,
template: `<ul>
<li v-for="(item, index) in widgets" :key="item.key">
<h5 class='widget-title'>{{item.title}}: </h5>
<ul class="widget-tool">
<li v-for="(w, index) in item.widgets" @click="addWidget(w.Schema.widget)" :key="index">{{w.Schema.title}}</li>
</ul>
</li>
</ul>`,
data () {
return {
widgets: epage.store.getWidgets()
}
},
methods: {
addWidget (widget) {
console.log(12122, epage.store)
epage.store.addWidget(widget)
}
}
})
// 自定义配置面板
let selectedSchemaKey =''
const flatWidgets = epage.store.getFlatWidgets()
epage.store.$$store.watch(
state => state.selectedSchema,
selectedSchema => {
if (selectedSchema.key === selectedSchemaKey) return
selectedSchemaKey = selectedSchema.key
const Setting = flatWidgets[selectedSchema.widget].Setting
const el = document.createElement('div')
setting.innerHTML = ''
setting.appendChild(el)
new Vue({
el,
data () {
return {
selectedSchema
}
},
template: `<div id="my-setting" style="width: 300px">
<form>
<h4>配置面板</h4>
<div class="epage-form-item">
<label>
<span>key: </span>
{{selectedSchema.key}}
</label>
</div>
<div class="epage-form-item">
<label>
<span>name: </span>
<input v-model='selectedSchema.name' />
</label>
</div>
<div class="epage-form-item">
<label>
<span>placeholder: </span>
<input v-model='selectedSchema.placeholder' />
</label>
</div>
</form>
</div>`
})
},
{
deep: true
}
)
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# 基于schema定制设计器
const epage = new Epage({
// 其他参数
panels: {
header: false,
tool: false,
setting: false
}
})
const tool = document.getElementById('tool')
const setting = document.getElementById('setting')
// 基于schema实例定制设计器
const schemas = [{
"key": "kASJAJwRB",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"style": {},
"name": "username",
"type": "string",
"label": "姓名",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入",
"default": ""
}, {
"key": "kASJAJwR3",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"style": {},
"name": "school",
"type": "string",
"label": "学校",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入",
"default": ""
}, {
"key": "kASJAJwe3",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"style": {},
"name": "address",
"type": "string",
"label": "地址",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入",
"default": ""
}]
// 自定义工具面板
new Vue({
el: tool,
template: `<div>
<h5 class='widget-title'>组件: </h5>
<ul class="widget-tool">
<li v-for="(schema, index) in schemas" @click="addWidget(schema)" :key="index">{{schema.label}}</li>
</ul>
</div>`,
data () {
return {
schemas
}
},
methods: {
addWidget (schema) {
console.log(schema, 99)
epage.store.addWidget(schema)
}
}
})
// 自定义配置面板
let selectedSchemaKey =''
const flatWidgets = epage.store.getFlatWidgets()
epage.store.$$store.watch(
state => state.selectedSchema,
selectedSchema => {
if (selectedSchema.key === selectedSchemaKey) return
selectedSchemaKey = selectedSchema.key
const Setting = flatWidgets[selectedSchema.widget].Setting
const el = document.createElement('div')
setting.innerHTML = ''
setting.appendChild(el)
new Vue({
el,
data () {
return {
selectedSchema
}
},
template: `<div id="my-setting" style="width: 300px">
<form>
<h4>配置面板</h4>
<div class="epage-form-item">
<label>
<span>key: </span>
{{selectedSchema.key}}
</label>
</div>
<div class="epage-form-item">
<label>
<span>name: </span>
<input v-model='selectedSchema.name' />
</label>
</div>
<div class="epage-form-item">
<label>
<span>label: </span>
<input v-model='selectedSchema.label' />
</label>
</div>
<div class="epage-form-item">
<label>
<span>placeholder: </span>
<input v-model='selectedSchema.placeholder' />
</label>
</div>
</form>
</div>`
})
},
{
deep: true
}
)
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
← 开发插件 epage-core核心模块 →