Skip to content

Commit 49f2976

Browse files
tangbctangbc
committed
All use eslint code style.
1 parent 2af4c25 commit 49f2976

30 files changed

+371
-296
lines changed

‎demos/common/Corner.vue

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<a v-bind:href="url" class="github-corner" aria-label="View source on GitHub">
3-
<svg v-bind:width="size" v-bind: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"></path>
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" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
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"></path>
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" />
77
</svg>
88
</a>
99
</template>
@@ -12,10 +12,13 @@
1212
import { isMobile } from './util'
1313
1414
export default {
15-
name: 'github-corner',
15+
name: 'GithubCorner',
1616
1717
props: {
18-
path: String
18+
path: {
19+
type: String,
20+
default: ''
21+
}
1922
},
2023
2124
data () {
@@ -32,7 +35,6 @@ export default {
3235
}
3336
</script>
3437

35-
3638
<style>
3739
.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}}
3840
</style>

‎demos/common/Header.vue

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
<template>
2-
<header v-bind:class="warning ? 'warning': ''">
2+
<header :class="warning ? 'warning': ''">
33
<h1>{{ title }}</h1>
44
<section>
55
<span class="desciption">{{ desciption }}</span>
6-
<span id="time" class="performance time"></span>
7-
<span id="memory" class="performance memory"></span>
8-
<div class="icon" v-bind:class="showSetting ? 'active' : ''" v-on:click="clickIcon">
6+
<span id="time" class="performance time" />
7+
<span id="memory" class="performance memory" />
8+
<div class="icon" :class="showSetting ? 'active' : ''" @click="clickIcon">
99
<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"></path>
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" />
1111
</svg>
1212
</div>
13-
<div class="setting" v-show="showSetting">
14-
<div class="option" v-if="showStart">
15-
<span class="name" v-if="isMobile">Index:</span>
16-
<span class="name" v-else>Start index:</span>
17-
<input type="text"
18-
v-model="selfStartIndex"
19-
v-on:focus="$event.target.select()"
20-
v-on:input="inputDataChange('start', $event.target.value)"
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)"
2120
>
2221
</div>
2322

2423
<div class="option">
25-
<span class="name" v-if="isMobile">Count:</span>
26-
<span class="name" v-else>List count:</span>
24+
<span v-if="isMobile" class="name">Count:</span>
25+
<span v-else class="name">List count:</span>
2726
<label>
28-
<input type="radio" value="1" v-model="renderCount">
27+
<input v-model="renderCount" type="radio" value="1">
2928
<span class="t1">1,000</span>
3029
</label>
3130
<label class="middle">
32-
<input type="radio" value="2" v-model="renderCount">
31+
<input v-model="renderCount" type="radio" value="2">
3332
<span class="t2">10,000</span>
3433
</label>
3534
<label>
36-
<input type="radio" value="3" v-model="renderCount">
35+
<input v-model="renderCount" type="radio" value="3">
3736
<span class="t3">100,000</span>
3837
</label>
3938
</div>
@@ -43,10 +42,30 @@
4342
</template>
4443

4544
<script>
46-
import { isMobile, debounce, getQuery, countStorage, settingStorage } from './util'
45+
import { isMobile, debounce, countStorage, settingStorage } from './util'
4746
4847
export default {
49-
name: 'app-header',
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+
},
5069
5170
data () {
5271
return {
@@ -74,12 +93,8 @@ export default {
7493
}
7594
},
7695
77-
props: {
78-
warning: Boolean,
79-
title: String,
80-
desciption: String,
81-
startIndex: Number,
82-
onDataChange: Function
96+
mounted () {
97+
this.selfStartIndex = this.startIndex
8398
},
8499
85100
methods: {
@@ -95,10 +110,6 @@ export default {
95110
this.onDataChange(type, val)
96111
}
97112
}, 1000, false)
98-
},
99-
100-
mounted () {
101-
this.selfStartIndex = this.startIndex
102113
}
103114
}
104115
</script>

‎demos/common/Item.vue

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
<template>
2-
<div class="item" v-bind:style="itemStyle">
3-
<div class="index">#{{ index }}</div>
2+
<div class="item" :style="itemStyle">
3+
<div class="index">
4+
#{{ index }}
5+
</div>
46
<div class="card">
57
<div class="card-avatar"
6-
v-bind:class="{'no-avatar': !avatar}"
7-
v-bind:style="{'background-color': !avatar && info.color}"
8+
:class="{'no-avatar': !avatar}"
9+
:style="{'background-color': !avatar && info.color}"
810
>
911
<span v-if="!avatar">{{ getAbbrName(info.name) }}</span>
10-
<img v-else class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR">
12+
<img v-else class="card-avatar-img" :src="info.avatar" alt="AVATAR">
1113
</div>
1214
<div class="card-info">
13-
<div class="card-info-item name" v-bind:style="{color: info.color}">{{ info.name }}</div>
14-
<div class="card-info-item time">Registered: {{ info.time }}</div>
15+
<div class="card-info-item name" :style="{color: info.color}">
16+
{{ info.name }}
17+
</div>
18+
<div class="card-info-item time">
19+
Registered: {{ info.time }}
20+
</div>
21+
</div>
22+
<div v-if="variable" class="card-height">
23+
{{ height }}px
1524
</div>
16-
<div class="card-height" v-if="variable">{{ height }}px</div>
1725
</div>
1826
</div>
1927
</template>
@@ -22,17 +30,26 @@
2230
import { getQuery } from './util'
2331
2432
export default {
25-
name: 'item',
33+
name: 'Item',
2634
2735
props: {
28-
height: Number,
29-
index: Number,
36+
height: {
37+
type: Number,
38+
default: 0
39+
},
40+
index: {
41+
type: Number,
42+
default: 0
43+
},
3044
variable: Boolean,
3145
info: {
32-
name: String,
33-
time: String,
34-
avatar: String,
35-
color: String,
46+
type: Object,
47+
default: () => ({
48+
name: '',
49+
time: '',
50+
avatar: '',
51+
color: ''
52+
})
3653
}
3754
},
3855
@@ -46,7 +63,7 @@ export default {
4663
itemStyle () {
4764
return {
4865
'height': `${this.height}px`,
49-
'line-height': `${this.height}px`,
66+
'line-height': `${this.height}px`
5067
}
5168
}
5269
},

‎demos/common/util.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const topTypeArr = [
3535
'ShortHairShortWaved',
3636
'ShortHairSides',
3737
'ShortHairTheCaesar',
38-
'ShortHairTheCaesarSidePart',
38+
'ShortHairTheCaesarSidePart'
3939
]
4040
const accessoriesTypeArr = [
4141
'Blank',
@@ -44,15 +44,15 @@ const accessoriesTypeArr = [
4444
'Prescription02',
4545
'Round',
4646
'Sunglasses',
47-
'Wayfarers',
47+
'Wayfarers'
4848
]
4949
const facialHairTypeArr = [
5050
'Blank',
5151
'BeardMedium',
5252
'BeardLight',
5353
'BeardMagestic',
5454
'MoustacheFancy',
55-
'MoustacheMagnum',
55+
'MoustacheMagnum'
5656
]
5757
const facialHairColor = [
5858
'Auburn',
@@ -62,7 +62,7 @@ const facialHairColor = [
6262
'Brown',
6363
'BrownDark',
6464
'Platinum',
65-
'Red',
65+
'Red'
6666
]
6767
const clotheTypeArr = [
6868
'BlazerShirt',
@@ -73,7 +73,7 @@ const clotheTypeArr = [
7373
'Overall',
7474
'ShirtCrewNeck',
7575
'ShirtScoopNeck',
76-
'ShirtVNeck',
76+
'ShirtVNeck'
7777
]
7878
const clotheColor = [
7979
'Black',
@@ -90,7 +90,7 @@ const clotheColor = [
9090
'PastelYellow',
9191
'Pink',
9292
'Red',
93-
'White',
93+
'White'
9494
]
9595
const graphicTypeArr = [
9696
'Bat',
@@ -103,7 +103,7 @@ const graphicTypeArr = [
103103
'Selena',
104104
'Bear',
105105
'SkullOutline',
106-
'Skull',
106+
'Skull'
107107
]
108108
const eyeTypeArr = [
109109
'Close',
@@ -117,7 +117,7 @@ const eyeTypeArr = [
117117
'Squint',
118118
'Surprised',
119119
'Wink',
120-
'WinkWacky',
120+
'WinkWacky'
121121
]
122122
const eyebrowTypeArr = [
123123
'Angry',
@@ -131,7 +131,7 @@ const eyebrowTypeArr = [
131131
'SadConcernedNatural',
132132
'UnibrowNatural',
133133
'UpDown',
134-
'UpDownNatural',
134+
'UpDownNatural'
135135
]
136136
const mouthTypeArr = [
137137
'Concerned',
@@ -145,7 +145,7 @@ const mouthTypeArr = [
145145
'Smile',
146146
'Tongue',
147147
'Twinkle',
148-
'Vomit',
148+
'Vomit'
149149
]
150150
const skinColorArr = [
151151
'Tanned',
@@ -154,7 +154,7 @@ const skinColorArr = [
154154
'Light',
155155
'Brown',
156156
'DarkBrown',
157-
'Black',
157+
'Black'
158158
]
159159

160160
export const getRandomAvatar = () => {
@@ -165,13 +165,13 @@ export const getRandomAvatar = () => {
165165
`hatColor=${Random.pick(facialHairTypeArr)}`,
166166
`facialHairType=${Random.pick(facialHairTypeArr)}`,
167167
`facialHairColor=${Random.pick(facialHairColor)}`,
168-
// `clotheType=${Random.pick(clotheTypeArr)}`,
168+
`clotheType=${Random.pick(clotheTypeArr)}`,
169169
`clotheColor=${Random.pick(clotheColor)}`,
170170
`graphicType=${Random.pick(graphicTypeArr)}`,
171171
`eyeType=${Random.pick(eyeTypeArr)}`,
172-
// `eyebrowType=${Random.pick(eyebrowTypeArr)}`,
172+
`eyebrowType=${Random.pick(eyebrowTypeArr)}`,
173173
`mouthType=${Random.pick(mouthTypeArr)}`,
174-
`skinColor=${Random.pick(skinColorArr)}`,
174+
`skinColor=${Random.pick(skinColorArr)}`
175175
].join('&')
176176
}
177177

@@ -180,7 +180,7 @@ export const getRandomUser = () => {
180180
name: Random.name(),
181181
time: Random.date(),
182182
color: Random.color(),
183-
avatar: getRandomAvatar(),
183+
avatar: getRandomAvatar()
184184
// avatar: `https://api.adorable.io/avatars/100/${Random.name()}`
185185
}
186186
}

0 commit comments

Comments
 (0)