Skip to content

Commit 9a8a499

Browse files
tangbctangbc
committed
Update demos
1 parent dee5e5d commit 9a8a499

File tree

18 files changed

+29936
-289
lines changed

18 files changed

+29936
-289
lines changed

‎.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"presets": [
3-
["env", { "modules": false }]
3+
["@babel/preset-env", { "modules": false }]
44
]
55
}

‎demos/common/Item.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div class="item" v-bind:style="itemStyle">
3+
<div class="index">#{{ index }}</div>
4+
<div class="card">
5+
<div class="card-avatar">
6+
<img class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR">
7+
</div>
8+
<div class="card-info">
9+
<div class="card-info-item name">Name: {{ info.name }}</div>
10+
<div class="card-info-item email">Email: {{ info.email }}</div>
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'item',
19+
20+
props: {
21+
height: Number,
22+
index: Number,
23+
info: {
24+
name: String,
25+
email: String,
26+
avatar: String
27+
}
28+
},
29+
30+
computed: {
31+
itemStyle () {
32+
return {
33+
'height': `${this.height}px`,
34+
'line-height': `${this.height}px`,
35+
}
36+
}
37+
}
38+
}
39+
</script>
40+
41+
<style lang="less">
42+
.item {
43+
box-sizing: border-box;
44+
display: flex;
45+
.index {
46+
flex: 1;
47+
text-align: center;
48+
}
49+
.card {
50+
flex: 4;
51+
display: flex;
52+
align-items: center;
53+
border-bottom: 1px dashed #a9a9a9;
54+
&-avatar {
55+
width: 40px;
56+
height: 40px;
57+
&-img {
58+
display: block;
59+
width: 100%;
60+
height: 100%;
61+
border-radius: 50%;
62+
}
63+
}
64+
&-info {
65+
display: flex;
66+
flex-direction: column;
67+
height: 100%;
68+
padding-left: 20px;
69+
&-item {
70+
flex: 1;
71+
height: 50%;
72+
line-height: 1;
73+
position: relative;
74+
white-space: nowrap;
75+
text-overflow: ellipsis;
76+
max-width: 300px;
77+
overflow: hidden;
78+
&.name {
79+
top: 25%;
80+
}
81+
&.email {
82+
top: 5%;
83+
color: #a9a9a9;
84+
}
85+
}
86+
}
87+
}
88+
}
89+
</style>

‎demos/common/base.less

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
html,body {
2+
height: 100%;
3+
overflow: hidden;
4+
font-size: 16px;
5+
font-family: serif;
6+
}
7+
header {
8+
font-family: monospace;
9+
p {
10+
font-size: 14px;
11+
background: #f7f7f7;
12+
padding: 10px;
13+
margin-bottom: 20px;
14+
border-radius: 5px;
15+
}
16+
}
17+
.app {
18+
height: 100%;
19+
position: relative;
20+
}
21+
.container {
22+
width: 520px;
23+
height: 50%;
24+
position: absolute;
25+
left: 50%;
26+
transform: translateX(-50%);
27+
}
28+
.main {
29+
padding: 5px;
30+
background-color: #b6bda7;
31+
}
32+
.list {
33+
background-color: #ffffff;
34+
}

‎demos/common/mock.min.js

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/common/readme.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
###
2+
3+
This forder puts public module and util used in every demo's.

‎demos/common/util.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Random } from './mock.min'
2+
3+
export const getRandomUser = () => {
4+
const name = Random.name()
5+
return {
6+
name: name,
7+
email: Random.email(),
8+
avatar: `https://api.adorable.io/avatars/100/${name}`
9+
// avatar: `https://getavataaars.com/?hairColor=BrownDark&topType=LongHairStraight2`
10+
}
11+
}

‎demos/frag-mode/App.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div class="app">
3+
<div class="container">
4+
<header>
5+
<h1>frag-mode</h1>
6+
<p></p>
7+
</header>
8+
<div class="main">
9+
<virtual-list class="list"
10+
:size="size"
11+
:remain="remain"
12+
:bench="bench"
13+
>
14+
<item
15+
v-for="item in items"
16+
v-bind:key="item.index"
17+
:index="item.index"
18+
:height="size"
19+
:info="item.info"
20+
/>
21+
</virtual-list>
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
import Item from '../common/Item.vue'
29+
import VirtualList from 'vue-virtual-scroll-list'
30+
import { getRandomUser } from '../common/util'
31+
32+
const remain = 6
33+
const bench = remain
34+
const itemSize = 80
35+
const itemCount = 1000 * 100
36+
37+
let itemList = []
38+
for (let idx = 0; idx < itemCount; idx++) {
39+
itemList.push({
40+
index: idx,
41+
height: itemSize,
42+
info: getRandomUser()
43+
})
44+
}
45+
46+
export default {
47+
name: 'app',
48+
49+
components: {
50+
'item': Item,
51+
'virtual-list': VirtualList
52+
},
53+
54+
data () {
55+
return {
56+
bench,
57+
remain,
58+
size: itemSize,
59+
items: itemList
60+
}
61+
},
62+
63+
methods: {
64+
getItemProps (itemIndex) {
65+
const props = {
66+
height: itemSize,
67+
index: itemIndex,
68+
...getRandomUser()
69+
}
70+
return {
71+
props
72+
}
73+
}
74+
}
75+
}
76+
</script>
77+
78+
<style lang="less">
79+
@import '../common/base.less';
80+
</style>

0 commit comments

Comments
 (0)