Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c938d61

Browse files
use menu to display example lists now
1 parent d8e44ab commit c938d61

File tree

1 file changed

+98
-51
lines changed

1 file changed

+98
-51
lines changed

‎demo/apps/apijson_demo/templates/index.html‎

Lines changed: 98 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -23,89 +23,110 @@
2323
<tab-pane label="apijson put" name="tab_put"></tab-pane>
2424
<tab-pane label="apijson delete" name="tab_delete"></tab-pane>
2525
</tabs>
26+
<layout>
27+
<sider hide-trigger :style="{height: '80vh', width:'360px', 'min-width': '360px', 'max-width': '380px', overflow: 'auto', background: '#fff'}">
28+
<i-menu :active-name="0" @on-select="on_select_get" width="360px" ref='menu_get'>
29+
<menu-group title="apijson get examples" v-if="tab_current==='tab_get'">
30+
<menu-item v-for="(item,index) in request_get" :name="index" :key="index">
31+
📋 {item.label}
32+
</menu-item>
33+
</menu-group>
34+
</i-menu>
35+
<i-menu :active-name="0" @on-select="on_select_head" width="360px">
36+
<menu-group title="apijson head examples" v-if="tab_current==='tab_head'">
37+
<menu-item v-for="(item,index) in request_head" :name="index" :key="index">
38+
📋 {item.label}
39+
</menu-item>
40+
</menu-group>
41+
</i-menu>
42+
<i-menu :active-name="0" @on-select="on_select_post" width="360px">
43+
<menu-group title="apijson post examples" v-if="tab_current==='tab_post'">
44+
<menu-item v-for="(item,index) in request_post" :name="index" :key="index">
45+
📋 {item.label}
46+
</menu-item>
47+
</menu-group>
48+
</i-menu>
49+
<i-menu :active-name="0" @on-select="on_select_put" width="360px">
50+
<menu-group title="apijson put examples" v-if="tab_current==='tab_put'">
51+
<menu-item v-for="(item,index) in request_put" :name="index" :key="index">
52+
📋 {item.label}
53+
</menu-item>
54+
</menu-group>
55+
</i-menu>
56+
<i-menu :active-name="0" @on-select="on_select_delete" width="360px">
57+
<menu-group title="apijson delete examples" v-if="tab_current==='tab_delete'">
58+
<menu-item v-for="(item,index) in request_delete" :name="index" :key="index">
59+
📋 {item.label}
60+
</menu-item>
61+
</menu-group>
62+
</i-menu>
63+
</sider>
64+
<i-content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
2665
<Row>
2766
<i-col span="3"><div align="center">login user</div></i-col>
28-
<i-col span="8"><i-input value="{{=user_info}}" readonly/></i-col>
67+
<i-col span="18"><i-input value="{{=user_info}}" readonly/></i-col>
2968
{{if request.user:}}
3069
<i-col span="1"><div align="center"><i-button type="warning" size="large" @click="logout">Logout</i-button></div></i-col>
3170
{{else:}}
3271
<i-col span="1"><div align="center"><i-button type="primary" size="large" @click="login">Login</i-button></div></i-col>
3372
{{pass}}
3473
</Row>
3574
<Row v-if="tab_current==='tab_get'">
36-
<i-col span="3"><div align="center">HTTP POST URL</div></i-col>
37-
<i-col span="8"><i-input value="/apijson/get" readonly/></i-col>
75+
<i-col span="3"><div align="center">HTTP POST URL</div></i-col>
76+
<i-col span="18"><i-input value="/apijson/get" readonly/></i-col>
3877
</Row>
3978
<Row v-if="tab_current==='tab_get'">
40-
<i-col span="3"><div align="center"><strong>apijson get</strong> request <span class="notice">{request_get.length}</span> examples</div></i-col>
41-
<i-col span="8">
42-
<i-select v-model="select_current">
43-
<i-option v-for="(item,index) in request_get" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
44-
</i-select>
45-
</i-col>
79+
<i-col span="3"><div align="center">example name</div></i-col>
80+
<i-col span="18"><strong><i-input :value="request_get[cmenu_get].label" readonly/></strong></i-col>
4681
</Row>
4782

4883
<Row v-if="tab_current==='tab_head'">
4984
<i-col span="3"><div align="center">HTTP HEAD URL</div></i-col>
50-
<i-col span="8"><i-input value="/apijson/head" readonly/></i-col>
85+
<i-col span="18"><i-input value="/apijson/head" readonly/></i-col>
5186
</Row>
5287
<Row v-if="tab_current==='tab_head'">
53-
<i-col span="3"><div align="center"><strong>apijson head</strong> request <span class="notice">{request_head.length}</span> examples</div></i-col>
54-
<i-col span="8">
55-
<i-select v-model="select_current">
56-
<i-option v-for="(item,index) in request_head" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
57-
</i-select>
58-
</i-col>
88+
<i-col span="3"><div align="center">example name</div></i-col>
89+
<i-col span="18"><strong><i-input :value="request_head[cmenu_head].label" readonly/></strong></i-col>
5990
</Row>
6091

6192
<Row v-if="tab_current==='tab_post'">
62-
<i-col span="3"><div align="center">POST URL</div></i-col>
63-
<i-col span="8"><i-input value="/apijson/post" readonly/></i-col>
93+
<i-col span="3"><div align="center">POST URL</div></i-col>
94+
<i-col span="18"><i-input value="/apijson/post" readonly/></i-col>
6495
</Row>
6596
<Row v-if="tab_current==='tab_post'">
66-
<i-col span="3"><div align="center"><strong>apijson post</strong> request <span class="notice">{request_post.length}</span> examples</div></i-col>
67-
<i-col span="8">
68-
<i-select v-model="select_current">
69-
<i-option v-for="(item,index) in request_post" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
70-
</i-select>
71-
</i-col>
97+
<i-col span="3"><div align="center">example name</div></i-col>
98+
<i-col span="18"><strong><i-input :value="request_post[cmenu_post].label" readonly/></strong></i-col>
7299
</Row>
73100

74101
<Row v-if="tab_current==='tab_put'">
75102
<i-col span="3"><div align="center">PUT URL</div></i-col>
76-
<i-col span="8"><i-input value="/apijson/put" readonly/></i-col>
103+
<i-col span="18"><i-input value="/apijson/put" readonly/></i-col>
77104
</Row>
78105
<Row v-if="tab_current==='tab_put'">
79-
<i-col span="3"><div align="center"><strong>apijson put</strong> request <span class="notice">{request_put.length}</span> examples</div></i-col>
80-
<i-col span="8">
81-
<i-select v-model="select_current">
82-
<i-option v-for="(item,index) in request_put" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
83-
</i-select>
84-
</i-col>
106+
<i-col span="3"><div align="center">example name</div></i-col>
107+
<i-col span="18"><strong><i-input :value="request_put[cmenu_put].label" readonly/></strong></i-col>
85108
</Row>
86109

87110
<Row v-if="tab_current==='tab_delete'">
88111
<i-col span="3"><div align="center">DELETE URL</div></i-col>
89-
<i-col span="8"><i-input value="/apijson/delete" readonly/></i-col>
112+
<i-col span="18"><i-input value="/apijson/delete" readonly/></i-col>
90113
</Row>
91114
<Row v-if="tab_current==='tab_delete'">
92-
<i-col span="3"><div align="center"><strong>apijson delete</strong> request <span class="notice">{request_delete.length}</span> examples</div></i-col>
93-
<i-col span="8">
94-
<i-select v-model="select_current">
95-
<i-option v-for="(item,index) in request_delete" :value="item.value" :key="item.value">{index+1}. {item.label}</i-option>
96-
</i-select>
97-
</i-col>
115+
<i-col span="3"><div align="center">example name</div></i-col>
116+
<i-col span="18"><strong><i-input :value="request_delete[cmenu_delete].label" readonly/></strong></i-col>
98117
</Row>
99118

100119
<Row>
101120
<i-col span="3"><div align="center">request data</div></i-col>
102-
<i-col span="8"><i-input v-model="request_data" type="textarea" :autosize="{minRows: 3,maxRows: 15}" placeholder="request data" /></i-col>
121+
<i-col span="18"><i-input v-model="request_data" type="textarea" :autosize="{minRows: 3,maxRows: 15}" placeholder="request data" /></i-col>
103122
<i-col span="1"><div align="center"><i-button type="primary" size="large" @click="post_request_data" v-bind:disabled="!can_post">Post</i-button></div></i-col>
104123
</Row>
105124
<Row>
106125
<i-col span="3"><div align="center">response data</div></i-col>
107-
<i-col span="8"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>
126+
<i-col span="18"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>
108127
</Row>
128+
</i-content>
129+
</layout>
109130
</div>
110131
</div>
111132
<script>
@@ -119,7 +140,13 @@
119140
request_put : {{<<request_put_json}},
120141
request_delete : {{<<request_delete_json}},
121142
request_data : "",
122-
select_current : "",
143+
144+
cmenu_get : 0,
145+
cmenu_head : 0,
146+
cmenu_post : 0,
147+
cmenu_put : 0,
148+
cmenu_delete : 0,
149+
123150
can_post : true,
124151
response_data : "",
125152
tab_current : "tab_get",
@@ -134,7 +161,36 @@
134161
methods: {
135162
init_default: function(){
136163
vm.request_data = vm.request_get[0].value
137-
vm.select_current = vm.request_data
164+
},
165+
on_select_get: function(name){
166+
vm.cmenu_get = parseInt(name)
167+
vm.request_data = vm.request_get[vm.cmenu_get].value
168+
vm.response_data = ""
169+
vm.can_post = true
170+
},
171+
on_select_head: function(name){
172+
vm.cmenu_head = parseInt(name)
173+
vm.request_data = vm.request_head[vm.cmenu_head].value
174+
vm.response_data = ""
175+
vm.can_post = true
176+
},
177+
on_select_post: function(name){
178+
vm.cmenu_post = parseInt(name)
179+
vm.request_data = vm.request_post[vm.cmenu_post].value
180+
vm.response_data = ""
181+
vm.can_post = true
182+
},
183+
on_select_put: function(name){
184+
vm.cmenu_put = parseInt(name)
185+
vm.request_data = vm.request_put[vm.cmenu_put].value
186+
vm.response_data = ""
187+
vm.can_post = true
188+
},
189+
on_select_delete: function(name){
190+
vm.cmenu_delete = parseInt(name)
191+
vm.request_data = vm.request_delete[vm.cmenu_delete].value
192+
vm.response_data = ""
193+
vm.can_post = true
138194
},
139195
post_request_data: function(){
140196
$.ajax({
@@ -171,16 +227,7 @@
171227
else if (n=="tab_delete") {
172228
vm.request_data = vm.request_delete[0].value
173229
}
174-
vm.select_current = vm.request_data
175230
vm.response_data = ""
176-
},
177-
select_current : function(n,o){
178-
if (n!=null && n!="" && n!==vm.request_data) {
179-
vm.request_data = n
180-
}
181-
else {
182-
vm.select_current = vm.request_data
183-
}
184231
}
185232
}
186233
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /