Skip to content

Commit 2a54b16

Browse files
tangbctangbc
committed
Update example
1 parent 8e801c5 commit 2a54b16

File tree

7 files changed

+67
-39
lines changed

7 files changed

+67
-39
lines changed

‎example/package-lock.json

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

‎example/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"core-js": "^3.6.4",
13+
"vue-github-button": "^1.1.2",
1314
"vue-router": "^3.1.6"
1415
},
1516
"devDependencies": {

‎example/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="stylesheet" href="<%= BASE_URL %>milligram.css" />
1010
<link rel="stylesheet" href="<%= BASE_URL %>highlight/theme.css" />
1111
<script src="<%= BASE_URL %>highlight/pack.js"></script>
12+
<script async defer src="https://buttons.github.io/buttons.js"></script>
1213
<script>hljs.initHighlightingOnLoad()</script>
1314
</head>
1415
<body>

‎example/src/components/Corner.vue

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<template>
22
<a v-if="!isMobile" :href="url" class="github-corner" aria-label="View source on GitHub">
3-
<svg :width="size" :height="size" viewBox="0 0 250 250" style="fill:#9b4dca; 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>
3+
GITHUB
84
</a>
95
</template>
106

@@ -30,27 +26,20 @@ export default {
3026
</script>
3127

3228
<style lang="less" scoped>
33-
.octo-arm,
34-
.github-corner:hover {
35-
animation:octocat-wave 560ms ease-in-out
36-
}
37-
@keyframes octocat-wave{
38-
0%,100%{
39-
transform:rotate(0)
40-
}
41-
20%,60%{
42-
transform:rotate(-25deg)
43-
}
44-
40%,80%{
45-
transform:rotate(10deg)
46-
}
47-
}
48-
@media (max-width:500px){
49-
.github-corner:hover .octo-arm{
50-
animation:none
51-
}
52-
.github-corner .octo-arm{
53-
animation:octocat-wave 560ms ease-in-out
54-
}
29+
.github-corner {
30+
padding-left: 30px;
31+
width: 100px;
32+
height: 40px;
33+
line-height: 40px;
34+
position: fixed;
35+
right: 0;
36+
top: 0;
37+
color: #fff;
38+
font-size: 14px;
39+
font-weight: bold;
40+
background-size: 30px 30px;
41+
background-repeat: no-repeat;
42+
background-position: 0 center;
43+
background-image: url("data:image/svg+xml,%3Csvg t='1587863082639' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2074' width='200' height='200'%3E%3Cpath d='M841.6 268.8c32-57.6-3.2-134.4-3.2-134.4-80 0-137.6 54.4-137.6 54.4-32-19.2-134.4-19.2-134.4-19.2s-102.4 0-134.4 19.2c0 0-57.6-54.4-137.6-54.4 0 0-35.2 76.8-3.2 134.4 0 0-70.4 67.2-44.8 211.2 25.6 134.4 144 169.6 220.8 169.6 0 0-32 25.6-25.6 70.4 0 0-44.8 25.6-89.6 9.6-44.8-19.2-67.2-64-67.2-64s-44.8-57.6-89.6-35.2c0 0-12.8 12.8 35.2 35.2 0 0 35.2 54.4 48 86.4 12.8 32 86.4 57.6 156.8 41.6v102.4s0 9.6-19.2 12.8c-19.2 3.2-19.2 12.8-9.6 12.8h323.2c9.6 0 9.6-9.6-9.6-12.8-19.2-3.2-19.2-12.8-19.2-12.8v-102.4-70.4c0-44.8-32-70.4-32-70.4 76.8 0 195.2-35.2 220.8-169.6 22.4-147.2-48-214.4-48-214.4z' fill='%23ffffff' p-id='2075'%3E%3C/path%3E%3C/svg%3E");
5544
}
5645
</style>

‎example/src/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Vue from 'vue'
22
import App from './App.vue'
33
import router from './router'
44

5+
import GithubButton from 'vue-github-button'
56
import VirtualList from '../../src/index'
67
import Introduction from './components/Introduction'
78
import CodeHighLight from './components/CodeHighLight'
@@ -13,6 +14,7 @@ Vue.component(Introduction.name, Introduction)
1314
Vue.component(CodeHighLight.name, CodeHighLight)
1415
Vue.component(Corner.name, Corner)
1516
Vue.component(Tab.name, Tab)
17+
Vue.component('github-button', GithubButton)
1618

1719
Vue.config.devtools = false
1820
Vue.config.productionTip = false

‎example/src/views/chat-room/Editor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default {
7777
onPaste (e) {
7878
e.preventDefault()
7979
const plainText = (e.originalEvent || e).clipboardData.getData('text/plain')
80-
document.execCommand("insertText", false, plainText)
80+
document.execCommand('insertText', false, plainText)
8181
},
8282
8383
eventSend () {

‎example/src/views/home/Main.vue

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
<template>
22
<div class="example">
3-
<github-corner />
43

54
<h2 class="name">
6-
<a href="https://github.com/tangbc/vue-virtual-scroll-list">vue-virtual-scroll-list</a>
5+
vue-virtual-scroll-list
76
</h2>
87

8+
<div class="desc">⚡️ A vue component support big amount data list with high scroll performance.</div>
9+
10+
<div class="icons">
11+
<span class="btn">
12+
<github-button href="https://github.com/tangbc/vue-virtual-scroll-list/issues" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Issue tangbc/vue-virtual-scroll-list on GitHub">Issue</github-button>
13+
</span>
14+
<span class="btn">
15+
<github-button href="https://github.com/tangbc/vue-virtual-scroll-list" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star tangbc/vue-virtual-scroll-list on GitHub">Star</github-button>
16+
</span>
17+
<span class="btn">
18+
<github-button href="https://github.com/tangbc/vue-virtual-scroll-list/fork" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Fork tangbc/vue-virtual-scroll-list on GitHub">Fork</github-button>
19+
</span>
20+
<span class="btn">
21+
<github-button href="https://github.com/tangbc/vue-virtual-scroll-list/subscription" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Watch tangbc/vue-virtual-scroll-list on GitHub">Watch</github-button>
22+
</span>
23+
</div>
24+
925
<div class="head">
1026
<img alt="Travis CI Status" src="https://travis-ci.org/tangbc/vue-virtual-scroll-list.svg?branch=master"/>
1127
<!-- <img alt="Code Coverage" src="https://codecov.io/gh/tangbc/vue-virtual-scroll-list/branch/master/graph/badge.svg"/> -->
1228
<img alt="NPM downloads" src="https://img.shields.io/npm/dm/vue-virtual-scroll-list.svg">
1329
<img alt="NPM version" src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg"/>
14-
<img alt="Vue version" src="https://img.shields.io/badge/vue-%3E=2.3.0-brightgreen.svg"/>
1530
<img alt="Package quality" src="https://npm.packagequality.com/shield/vue-virtual-scroll-list.svg">
1631
</div>
1732

@@ -23,12 +38,8 @@
2338
<li>Don't have to care about each item size, in sometimes it's difficult to know that.</li>
2439
</ul>
2540

26-
<h3 class="title">Todos</h3>
27-
<ul>
28-
<li>Improve calculate offset efficient.</li>
29-
<li>Support page scroll, table layout, unit test.</li>
30-
<li>......</li>
31-
</ul>
41+
<h3 class="title">Contributions</h3>
42+
<div>Welcome to improve this component with any issue, pull request or code review. ✋</div>
3243
</div>
3344
</template>
3445

@@ -44,12 +55,23 @@ export default {
4455

4556
<style lang="less" scoped>
4657
.name {
47-
margin: 1em 0;
58+
margin-top: 1em;
59+
}
60+
.desc {
61+
padding-bottom: 3em;
62+
}
63+
.icons {
64+
padding-bottom: 1em;
65+
.btn {
66+
margin-right: 1em;
67+
}
4868
}
4969
.head {
50-
margin-bottom: 2em;
70+
margin-bottom: 3em;
5171
img {
5272
margin-right: .5em;
73+
width: auto;
74+
height: 26px;
5375
}
5476
}
5577
.title {

0 commit comments

Comments
 (0)