Skip to content

Commit 90cb72c

Browse files
committed
Add component files
1 parent 1e24156 commit 90cb72c

File tree

2 files changed

+52
-0
lines changed

2 files changed

+52
-0
lines changed

src/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import VueSkipTo from './skip-to.vue'
2+
3+
export default function install (Vue) {
4+
Vue.component('VueSkipTo', VueSkipTo)
5+
}
6+
7+
// auto install
8+
if (typeof window !== 'undefined' && typeof window.Vue !== 'undefined') {
9+
window.Vue.use(install)
10+
}

src/skip-to.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<a class="vue-skip-to" :href="to" :tabindex="tabindex" v-text="text"></a>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'VueSkipTo',
8+
9+
props: {
10+
text: {
11+
type: String,
12+
default: 'Skip to main content'
13+
},
14+
to: {
15+
type: String,
16+
default: '#main'
17+
},
18+
tabindex: {
19+
type: [Number, null],
20+
default: null
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style>
27+
.vue-skip-to {
28+
position: absolute;
29+
left: 0;
30+
top: -100%;
31+
z-index: 1000;
32+
width: max-content;
33+
padding: 8px 10px;
34+
color: #fff
35+
}
36+
37+
.vue-skip-to:focus {
38+
background-color: #800000;
39+
top: 0;
40+
left: 0;
41+
}
42+
</style>

0 commit comments

Comments
 (0)