File tree Expand file tree Collapse file tree 2 files changed +52
-0
lines changed Expand file tree Collapse file tree 2 files changed +52
-0
lines changed Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments