Skip to content

Commit e5357b7

Browse files
l246804l246804
committed
chore: 更新演练场用例
1 parent 92ffdc8 commit e5357b7

File tree

3 files changed

+266
-0
lines changed

3 files changed

+266
-0
lines changed

‎playground/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Playground</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/index.ts"></script>
11+
</body>
12+
</html>

‎playground/src/App.vue‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<script setup lang="ts">
2+
import type { ColumnProps, SectionLayoutCardArea } from '@/element-plus'
3+
import { sleep } from '@antfu/utils'
4+
import { useAsyncState } from '@vueuse/core'
5+
import { reactive } from 'vue'
6+
import {
7+
ColumnsRender,
8+
PaginationRender,
9+
SectionLayout,
10+
Toolbar,
11+
usePagination,
12+
} from '@/element-plus'
13+
14+
interface DataItem {
15+
date: string
16+
name: string
17+
state: string
18+
city: string
19+
address: string
20+
zip: string
21+
}
22+
23+
// #region Layout
24+
SectionLayout.configure({
25+
cardClass: 'el-card el-card__body',
26+
})
27+
28+
const layoutProps = reactive({
29+
gap: '',
30+
card: [] as SectionLayoutCardArea[],
31+
})
32+
// #endregion
33+
34+
// #region Table
35+
PaginationRender.defaultProps = {
36+
background: true,
37+
layout: 'slot, prev, pager, next, jumper, sizes, total',
38+
pagerCount: 5,
39+
pageSizes: [10, 20, 30, 40, 50, 100],
40+
}
41+
42+
const columns: ColumnProps<DataItem>[] = [
43+
{
44+
prop: 'date',
45+
label: 'Date',
46+
slots: {
47+
default({ row }) {
48+
return `${row.date} - ${Date.now()}`
49+
},
50+
header: 'date-header',
51+
},
52+
},
53+
{
54+
label: 'Delivery Info',
55+
children: [
56+
{
57+
prop: 'name',
58+
label: 'Name',
59+
},
60+
{
61+
label: 'Address Info',
62+
children: [
63+
{
64+
prop: 'state',
65+
label: 'State',
66+
},
67+
{
68+
prop: 'city',
69+
label: 'City',
70+
},
71+
{
72+
prop: 'address',
73+
label: 'Address',
74+
},
75+
{
76+
prop: 'zip',
77+
label: 'Zip',
78+
},
79+
],
80+
},
81+
],
82+
},
83+
]
84+
85+
const { state, isLoading } = useAsyncState(
86+
async () => {
87+
await sleep(1e3)
88+
const rows = [
89+
{
90+
date: '2016-05-03',
91+
name: 'Tom',
92+
state: 'California',
93+
city: 'Los Angeles',
94+
address: 'No. 189, Grove St, Los Angeles',
95+
zip: 'CA 90036',
96+
},
97+
{
98+
date: '2016-05-02',
99+
name: 'Tom',
100+
state: 'California',
101+
city: 'Los Angeles',
102+
address: 'No. 189, Grove St, Los Angeles',
103+
zip: 'CA 90036',
104+
},
105+
{
106+
date: '2016-05-04',
107+
name: 'Tom',
108+
state: 'California',
109+
city: 'Los Angeles',
110+
address: 'No. 189, Grove St, Los Angeles',
111+
zip: 'CA 90036',
112+
},
113+
{
114+
date: '2016-05-01',
115+
name: 'Tom',
116+
state: 'California',
117+
city: 'Los Angeles',
118+
address: 'No. 189, Grove St, Los Angeles',
119+
zip: 'CA 90036',
120+
},
121+
{
122+
date: '2016-05-08',
123+
name: 'Tom',
124+
state: 'California',
125+
city: 'Los Angeles',
126+
address: 'No. 189, Grove St, Los Angeles',
127+
zip: 'CA 90036',
128+
},
129+
{
130+
date: '2016-05-06',
131+
name: 'Tom',
132+
state: 'California',
133+
city: 'Los Angeles',
134+
address: 'No. 189, Grove St, Los Angeles',
135+
zip: 'CA 90036',
136+
},
137+
{
138+
date: '2016-05-07',
139+
name: 'Tom',
140+
state: 'California',
141+
city: 'Los Angeles',
142+
address: 'No. 189, Grove St, Los Angeles',
143+
zip: 'CA 90036',
144+
},
145+
]
146+
return { total: rows.length, rows }
147+
},
148+
{ rows: [], total: 0 },
149+
)
150+
151+
const pagination = usePagination({
152+
total: () => state.value.total,
153+
})
154+
// #endregion
155+
</script>
156+
157+
<template>
158+
<ElContainer class="layout">
159+
<ElMain>
160+
<SectionLayout
161+
v-loading="isLoading"
162+
v-bind="layoutProps"
163+
>
164+
<template #top>
165+
<ElAlert
166+
type="success"
167+
title="Top"
168+
description="This is top area."
169+
center
170+
:closable="false"
171+
/>
172+
</template>
173+
174+
<template #main-head>
175+
<Toolbar title="Test Table">
176+
<div :style="{ display: 'flex', gap: '0.5em' }">
177+
<ElText>Card Areas:</ElText>
178+
<ElCheckboxGroup v-model="layoutProps.card">
179+
<ElCheckbox value="top">
180+
Top
181+
</ElCheckbox>
182+
<ElCheckbox value="main">
183+
Main
184+
</ElCheckbox>
185+
<ElCheckbox value="bottom">
186+
Bottom
187+
</ElCheckbox>
188+
</ElCheckboxGroup>
189+
</div>
190+
191+
<div :style="{ display: 'flex', gap: '0.5em' }">
192+
<ElText>Gap:</ElText>
193+
<ElInput
194+
v-model="layoutProps.gap"
195+
placeholder="calc(1em * 0.8)"
196+
/>
197+
</div>
198+
199+
<template #extra>
200+
<ElButton>设置</ElButton>
201+
<ElButton>尺寸</ElButton>
202+
</template>
203+
</Toolbar>
204+
</template>
205+
206+
<ElTable
207+
border
208+
:data="state.rows"
209+
>
210+
<ColumnsRender :columns />
211+
</ElTable>
212+
213+
<template #main-foot>
214+
<PaginationRender :pagination>
215+
<div style="flex: 1">
216+
<ElButton
217+
type="danger"
218+
tag="div"
219+
>
220+
批量删除
221+
</ElButton>
222+
</div>
223+
</PaginationRender>
224+
</template>
225+
226+
<template #bottom>
227+
<ElAlert
228+
type="info"
229+
title="Bottom"
230+
description="This is bottom area."
231+
center
232+
:closable="false"
233+
/>
234+
</template>
235+
</SectionLayout>
236+
</ElMain>
237+
</ElContainer>
238+
</template>
239+
240+
<style scoped>
241+
.layout {
242+
position: fixed;
243+
top: 0;
244+
left: 0;
245+
right: 0;
246+
bottom: 0;
247+
}
248+
</style>

‎playground/src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import ElementPlus from 'element-plus'
2+
import { createApp } from 'vue'
3+
import App from './App.vue'
4+
import 'element-plus/dist/index.css'
5+
6+
createApp(App).use(ElementPlus).mount('#app')

0 commit comments

Comments
 (0)