Skip to content

Commit f3d1224

Browse files
JustineoJustineo
committed
feat: refine demo with browser window, update veui
1 parent f516b26 commit f3d1224

File tree

12 files changed

+203
-233
lines changed

12 files changed

+203
-233
lines changed

‎components/OneDemo.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,9 @@ Icon.register({
226226
transform translate(0, 0)
227227
padding 0
228228
229+
& >>> .veui-layout
230+
min-width auto
231+
229232
.desc
230233
border 1px solid #eee
231234
padding 18px 20px

‎one/docs/changelog.vue

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
</veui-fieldset>
7676
</veui-form>
7777
<section
78-
v-for="{ version, codeName, date, changeset } of filteredChangelog"
78+
v-for="{ version, codeName, date, changeset } of pagedChangelog"
7979
:key="version"
8080
class="version-item"
8181
data-markdown
@@ -114,19 +114,27 @@
114114
</ul>
115115
</section>
116116
<section
117-
v-if="filteredChangelog.length === 0"
117+
v-if="pagedChangelog.length === 0"
118118
class="not-found"
119119
@click="updateShrugger"
120120
>
121121
<span class="emoji">{{ shrugger }} </span>
122122
<p>没有符合条件的变更记录。</p>
123123
</section>
124+
<section class="pagination">
125+
<veui-pagination
126+
:page="page"
127+
:page-size="pageSize"
128+
:total="filteredChangelog.length"
129+
@redirect="val => page = val"
130+
/>
131+
</section>
124132
</article>
125133
</template>
126134

127135
<script>
128136
import { cloneDeep } from 'lodash'
129-
import { Form, Field, Fieldset, CheckboxGroup, Select, Checkbox } from 'veui'
137+
import { Form, Field, Fieldset, CheckboxGroup, Select, Checkbox, Pagination } from 'veui'
130138
import changelog from '../assets/data/changelog.json'
131139
132140
const allTypes = [
@@ -169,7 +177,8 @@ export default {
169177
'veui-fieldset': Fieldset,
170178
'veui-checkbox-group': CheckboxGroup,
171179
'veui-select': Select,
172-
'veui-checkbox': Checkbox
180+
'veui-checkbox': Checkbox,
181+
'veui-pagination': Pagination
173182
},
174183
data () {
175184
return {
@@ -182,7 +191,9 @@ export default {
182191
tag: null,
183192
from: null,
184193
to: allVersions[0].value,
185-
shrugger: getShrugger()
194+
shrugger: getShrugger(),
195+
page: 1,
196+
pageSize: 10
186197
}
187198
},
188199
computed: {
@@ -207,6 +218,10 @@ export default {
207218
})
208219
209220
return result.filter(({ changeset }) => changeset.length !== 0)
221+
},
222+
pagedChangelog () {
223+
const { page, pageSize, filteredChangelog } = this
224+
return filteredChangelog.slice((page - 1) * pageSize, page * pageSize)
210225
}
211226
},
212227
watch: {
@@ -259,6 +274,9 @@ export default {
259274
& >>> .veui-field
260275
margin-bottom 12px
261276
277+
& .veui-field
278+
margin-bottom 0
279+
262280
& >>> .veui-field .veui-field-no-label
263281
margin-bottom 0
264282
@@ -360,6 +378,9 @@ h2
360378
p
361379
margin 0 -0.75em 0 0
362380
381+
.pagination
382+
margin-top 36px
383+
363384
@keyframes line-enter
364385
0%
365386
100%

‎one/docs/components/sidebar.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010

1111
通过 [`collapse-mode`](#props-collapse-mode) 属性指定收起模式，分别是 `slim`（部分收起） / `hidden`（完全收起）。
1212

13-
[[ demo src="/demo/sidebar/collapse-mode.vue" ]]
13+
[[ demo src="/demo/sidebar/collapse-mode.vue" browser="/demo/sidebar/collapse-mode.vue" ]]
1414

1515
### 展示/隐藏切换按钮
1616

1717
使用 `collapsible` 属性设置是否显示侧边栏展开/收起按钮。
1818

19-
[[ demo src="/demo/sidebar/collapsible.vue" ]]
19+
[[ demo src="/demo/sidebar/collapsible.vue" browser="/demo/sidebar/collapsible.vue" ]]
2020

2121
## API
2222

@@ -27,7 +27,7 @@
2727
| ``collapsible`` | `boolean` | `false` | 是否显示收起/展开按钮。 |
2828
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
2929
| ``autocollapse`` | `boolean` | `false` | 是否拉伸窗口到一定阈值时自动收起。 |
30-
| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式，分别是 `slim`（部分收起）/`hidden`（完全收起）。
30+
| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式，分别是 `slim`（部分收起）/`hidden`（完全收起）。
3131

3232
^^^collapsed
3333
:::badges

‎one/docs/demo/layout/basic.vue

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<template>
2-
<article>
2+
<veui-layout>
3+
<veui-header>Header</veui-header>
34
<veui-layout>
4-
<veui-header>Header</veui-header>
5+
<veui-sidebar>
6+
<div class="center full">
7+
Sidebar
8+
</div>
9+
</veui-sidebar>
510
<veui-layout>
6-
<veui-sidebar>
7-
<div class="center full">
8-
Sidebar
9-
</div>
10-
</veui-sidebar>
11-
<veui-layout>
12-
<veui-content>Content</veui-content>
13-
<veui-footer style="background: #ccc;">
14-
Footer（背景仅为演示）
15-
</veui-footer>
16-
</veui-layout>
11+
<veui-content>Content</veui-content>
12+
<veui-footer style="background: #ccc;">
13+
Footer（背景仅为演示）
14+
</veui-footer>
1715
</veui-layout>
1816
</veui-layout>
19-
</article>
17+
</veui-layout>
2018
</template>
2119

2220
<script>
@@ -34,14 +32,6 @@ export default {
3432
</script>
3533

3634
<style lang="less" scoped>
37-
article {
38-
height: 100%;
39-
40-
& > .veui-layout {
41-
min-width: 720px;
42-
}
43-
}
44-
4535
.center,
4636
.veui-layout-header,
4737
.veui-layout-footer,

‎one/docs/demo/layout/global-footer.vue

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<template>
2-
<article>
2+
<veui-layout>
3+
<veui-header>Header</veui-header>
34
<veui-layout>
4-
<veui-header>Header</veui-header>
5+
<veui-sidebar>
6+
<div class="center full">
7+
Sidebar
8+
</div>
9+
</veui-sidebar>
510
<veui-layout>
6-
<veui-sidebar>
7-
<div class="center full">
8-
Sidebar
9-
</div>
10-
</veui-sidebar>
11-
<veui-layout>
12-
<veui-content>Content</veui-content>
13-
</veui-layout>
11+
<veui-content>Content</veui-content>
1412
</veui-layout>
15-
<veui-footer style="background: #ccc;">
16-
Footer（背景仅为演示）
17-
</veui-footer>
1813
</veui-layout>
19-
</article>
14+
<veui-footer style="background: #ccc;">
15+
Footer（背景仅为演示）
16+
</veui-footer>
17+
</veui-layout>
2018
</template>
2119

2220
<script>
@@ -38,14 +36,6 @@ export default {
3836
</script>
3937

4038
<style lang="less" scoped>
41-
article {
42-
height: 100%;
43-
44-
& > .veui-layout {
45-
min-width: 720px;
46-
}
47-
}
48-
4939
.center,
5040
.veui-layout-header,
5141
.veui-layout-footer,

‎one/docs/demo/layout/global-sidebar.vue

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<template>
2-
<article>
2+
<veui-layout>
3+
<veui-sidebar>
4+
<div class="center full">
5+
Sidebar
6+
</div>
7+
</veui-sidebar>
38
<veui-layout>
4-
<veui-sidebar>
5-
<div class="center full">
6-
Sidebar
7-
</div>
8-
</veui-sidebar>
9+
<veui-header>Header</veui-header>
910
<veui-layout>
10-
<veui-header>Header</veui-header>
11-
<veui-layout>
12-
<veui-content>Content</veui-content>
13-
<veui-footer style="background: #ccc;">
14-
Footer（背景仅为演示）
15-
</veui-footer>
16-
</veui-layout>
11+
<veui-content>Content</veui-content>
12+
<veui-footer style="background: #ccc;">
13+
Footer（背景仅为演示）
14+
</veui-footer>
1715
</veui-layout>
1816
</veui-layout>
19-
</article>
17+
</veui-layout>
2018
</template>
2119

2220
<script>
@@ -38,14 +36,6 @@ export default {
3836
</script>
3937

4038
<style lang="less" scoped>
41-
article {
42-
height: 100%;
43-
44-
& > .veui-layout {
45-
min-width: 720px;
46-
}
47-
}
48-
4939
.center,
5040
.veui-layout-header,
5141
.veui-layout-footer,

‎one/docs/demo/layout/sticky.vue

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
11
<template>
2-
<article>
3-
<veui-layout style="--dls-layout-header-height: 64px;">
4-
<veui-header sticky>
5-
Header
6-
</veui-header>
2+
<veui-layout style="--dls-layout-header-height: 64px;">
3+
<veui-header sticky>
4+
Header
5+
</veui-header>
6+
<veui-layout>
7+
<veui-sidebar
8+
sticky
9+
style="max-height: 320px;"
10+
>
11+
<div class="center full">
12+
Sidebar
13+
</div>
14+
</veui-sidebar>
715
<veui-layout>
8-
<veui-sidebar
9-
sticky
10-
style="max-height: 320px;"
11-
>
12-
<div class="center full">
16+
<veui-content>
17+
<div
18+
class="center"
19+
style="height: 800px;"
20+
>
1321
Sidebar
1422
</div>
15-
</veui-sidebar>
16-
<veui-layout>
17-
<veui-content>
18-
<div
19-
class="center"
20-
style="height: 800px;"
21-
>
22-
Sidebar
23-
</div>
24-
</veui-content>
25-
<veui-footer
26-
sticky
27-
style="background: #ccc;"
28-
>
29-
Footer（背景仅为演示）
30-
</veui-footer>
31-
</veui-layout>
23+
</veui-content>
24+
<veui-footer
25+
sticky
26+
style="background: #ccc;"
27+
>
28+
Footer（背景仅为演示）
29+
</veui-footer>
3230
</veui-layout>
3331
</veui-layout>
34-
</article>
32+
</veui-layout>
3533
</template>
3634

3735
<script>
@@ -58,14 +56,6 @@ export default {
5856
</script>
5957

6058
<style lang="less" scoped>
61-
article {
62-
height: 100%;
63-
64-
& > .veui-layout {
65-
min-width: 720px;
66-
}
67-
}
68-
6959
.center,
7060
.veui-layout-header,
7161
.veui-layout-footer,

0 commit comments

Comments
 (0)