Skip to content

Commit 16f8d74

Browse files
StormtvStormtv
authored
Merge pull request #1 from tangbc/master
Update Master
2 parents 6d71b9d + eb7450e commit 16f8d74

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+13838
-40281
lines changed

‎.babelrc

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

‎.eslintrc.json

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,37 @@
11
{
2-
"extends": "standard",
2+
"extends": [
3+
"standard",
4+
"plugin:vue/recommended"
5+
],
36
"env": {
47
"browser": true,
58
"amd": true
69
},
10+
"globals": {
11+
"it": "readonly",
12+
"expect": "readonly",
13+
"describe": "readonly"
14+
},
715
"parserOptions": {
816
"ecmaVersion": 5,
917
"sourceType": "module"
1018
},
1119
"rules": {
1220
"indent": ["error", 4],
13-
// allow paren-less arrow functions
1421
"arrow-parens": 0,
15-
// allow async-await
1622
"generator-star-spacing": 0,
17-
// disallow trailing whitespace at the end of lines
18-
"no-trailing-spaces": [0, { "skipBlankLines": true }]
23+
"no-trailing-spaces": [ 0, { "skipBlankLines": true } ],
24+
"vue/html-indent": ["error", 4, {
25+
"baseIndent": 0,
26+
"alignAttributesVertically": false
27+
}],
28+
"vue/script-indent": ["error", 4],
29+
"vue/max-attributes-per-line": ["error", {
30+
"singleline": 10,
31+
"multiline": {
32+
"max": 10,
33+
"allowFirstLine": true
34+
}
35+
}]
1936
}
2037
}

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
dev
22
node_modules
33
npm-debug.log
4-
examples/**/*.map
4+
coverage
5+
demos/dev/
6+
demos/dev*/
7+
demos/**/*.map

‎.travis.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
language: node_js
2+
node_js:
3+
- 8
4+
script:
5+
- npm run ci
6+
branches:
7+
only:
8+
- master
9+
after_success:
10+
- bash <(curl -s https://codecov.io/bash)

‎README.md

Lines changed: 161 additions & 83 deletions
Large diffs are not rendered by default.

‎demos/common/Corner.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<a :href="url" class="github-corner" aria-label="View source on GitHub">
3+
<svg :width="size" :height="size" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 1000;" aria-hidden="true">
4+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
5+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin: 130px 106px;" fill="currentColor" class="octo-arm" />
6+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body" />
7+
</svg>
8+
</a>
9+
</template>
10+
11+
<script>
12+
import { isMobile } from './util'
13+
14+
export default {
15+
name: 'GithubCorner',
16+
17+
props: {
18+
path: {
19+
type: String,
20+
default: ''
21+
}
22+
},
23+
24+
data () {
25+
return {
26+
size: isMobile ? 40 : 80
27+
}
28+
},
29+
30+
computed: {
31+
url () {
32+
return `https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos` + (this.path || '')
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style>
39+
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
40+
</style>

‎demos/common/Header.vue

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<template>
2+
<header :class="warning ? 'warning': ''">
3+
<h1>{{ title }}</h1>
4+
<section>
5+
<span class="desciption">{{ desciption }}</span>
6+
<span id="time" class="performance time" />
7+
<span id="memory" class="performance memory" />
8+
<div class="icon" :class="showSetting ? 'active' : ''" @click="clickIcon">
9+
<svg width="25" height="25" t="1553394278598" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8690" xmlns:xlink="http://www.w3.org/1999/xlink">
10+
<path d="M809.21 474.749H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.864-16.101-35.966-35.966-35.966m0 215.796H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966M220.52 258.954c-19.865 0-35.966 16.101-35.966 35.966 0 19.865 16.101 35.966 35.966 35.966s35.966-16.101 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966m153.502 71.932H809.21c19.865 0 35.966-16.101 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.864 16.102 35.966 35.966 35.966M220.52 474.749c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.864-16.102-35.966-35.966-35.966m0 215.796c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966" p-id="8691" fill="#2c2c2c" />
11+
</svg>
12+
</div>
13+
<div v-show="showSetting" class="setting">
14+
<div v-if="showStart" class="option">
15+
<span v-if="isMobile" class="name">Index:</span>
16+
<span v-else class="name">Start index:</span>
17+
<input v-model="selfStartIndex" type="text"
18+
@focus="$event.target.select()"
19+
@input="inputDataChange('start', $event.target.value)"
20+
>
21+
</div>
22+
23+
<div class="option">
24+
<span v-if="isMobile" class="name">Count:</span>
25+
<span v-else class="name">List count:</span>
26+
<label>
27+
<input v-model="renderCount" type="radio" value="1">
28+
<span class="t1">1,000</span>
29+
</label>
30+
<label class="middle">
31+
<input v-model="renderCount" type="radio" value="2">
32+
<span class="t2">10,000</span>
33+
</label>
34+
<label>
35+
<input v-model="renderCount" type="radio" value="3">
36+
<span class="t3">100,000</span>
37+
</label>
38+
</div>
39+
</div>
40+
</section>
41+
</header>
42+
</template>
43+
44+
<script>
45+
import { isMobile, debounce, countStorage, settingStorage } from './util'
46+
47+
export default {
48+
name: 'AppHeader',
49+
50+
props: {
51+
warning: Boolean,
52+
title: {
53+
type: String,
54+
default: ''
55+
},
56+
desciption: {
57+
type: String,
58+
default: ''
59+
},
60+
startIndex: {
61+
type: Number,
62+
default: 0
63+
},
64+
onDataChange: {
65+
type: Function,
66+
default: () => {}
67+
}
68+
},
69+
70+
data () {
71+
return {
72+
isMobile,
73+
selfStartIndex: 0,
74+
showSetting: settingStorage.isShow(),
75+
renderCount: String(countStorage.get()).length - 3
76+
}
77+
},
78+
79+
computed: {
80+
showStart () {
81+
return this.startIndex !== undefined
82+
},
83+
84+
isRenderSetting () {
85+
return this.showSetting && (this.showStart)
86+
}
87+
},
88+
89+
watch: {
90+
renderCount (val) {
91+
countStorage.set(val)
92+
window.location.reload()
93+
}
94+
},
95+
96+
mounted () {
97+
this.selfStartIndex = this.startIndex
98+
},
99+
100+
methods: {
101+
clickIcon () {
102+
const nextStatus = !this.showSetting
103+
this.showSetting = nextStatus
104+
settingStorage.setShow(nextStatus)
105+
},
106+
107+
inputDataChange: debounce(function (type, value) {
108+
const val = Number(value)
109+
if (this.onDataChange && value !== '' && !isNaN(val) && val >= 0) {
110+
this.onDataChange(type, val)
111+
}
112+
}, 1000, false)
113+
}
114+
}
115+
</script>
116+
117+
<style lang="less">
118+
header {
119+
font-family: monospace;
120+
h1 {
121+
padding: 20px 0;
122+
@media (max-width: 640px) {
123+
padding: 10px 0;
124+
font-size: 24px;
125+
}
126+
}
127+
section {
128+
font-size: 14px;
129+
background: #f7f7f7;
130+
padding: 10px;
131+
margin-bottom: 20px;
132+
border-radius: 5px;
133+
position: relative;
134+
.performance {
135+
color: #ee82ee;
136+
position: absolute;
137+
right: 50px;
138+
font-size: 12px;
139+
@media (max-width: 640px) {
140+
display: block;
141+
position: relative;
142+
right: 0;
143+
padding-top: 5px;
144+
}
145+
}
146+
.memory {
147+
top: 18px;
148+
@media (max-width: 640px) {
149+
display: block;
150+
position: relative;
151+
right: 0;
152+
padding-top: 5px;
153+
top: 0;
154+
}
155+
}
156+
.time {
157+
top: 5px;
158+
}
159+
.icon {
160+
width: 25px;
161+
height: 25px;
162+
line-height: 25px;
163+
text-align: center;
164+
position: absolute;
165+
right: 10px;
166+
top: 5px;
167+
cursor: pointer;
168+
border-radius: 3px;
169+
&.active {
170+
background-color: #c0c0c0;
171+
}
172+
}
173+
.setting {
174+
position: relative;
175+
padding: 30px 0 20px 20px;
176+
@media (max-width: 640px) {
177+
padding: 20px 0 20px 0px;
178+
}
179+
.option {
180+
display: block;
181+
margin-bottom: 20px;
182+
&:last-child {
183+
margin: 0;
184+
}
185+
.name {
186+
font-family: 'Courier New', Courier, monospace;
187+
font-weight: bold;
188+
display: inline-block;
189+
min-width: 120px;
190+
text-align: left;
191+
@media (max-width: 640px) {
192+
min-width: 50px;
193+
}
194+
}
195+
.middle {
196+
margin: 0 20px;
197+
@media (max-width: 640px) {
198+
margin: 0;
199+
}
200+
}
201+
label {
202+
input {
203+
@media (max-width: 640px) {
204+
position: relative;
205+
top: 3px;
206+
}
207+
}
208+
span {
209+
@media (max-width: 640px) {
210+
position: relative;
211+
left: -5px;
212+
}
213+
}
214+
}
215+
}
216+
i {
217+
position: absolute;
218+
right: 0;
219+
color: lightsteelblue;
220+
font-size: 12px;
221+
}
222+
input[type="text"] {
223+
-webkit-appearance: none;
224+
appearance: none;
225+
padding: 5px;
226+
outline: none;
227+
color: #464a4c;
228+
background-color: #fff;
229+
border-radius: 3px;
230+
border: 1px solid rgba(0, 0, 0, .15);
231+
font-size: 14px;
232+
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
233+
&:focus {
234+
outline: 0;
235+
border-color: #5cb3fd;
236+
}
237+
}
238+
}
239+
}
240+
}
241+
header.warning {
242+
h1, .desciption {
243+
color: #ffc107;
244+
}
245+
.t3 {
246+
color: red;
247+
}
248+
}
249+
</style>

0 commit comments

Comments
 (0)