# VuePress右侧如何添加固定侧边栏-实现置顶和置底
# 快速导航
# 前言
在不久之前,有个前端同学好奇,聊到,我的网站itclanCoder (opens new window),在手机移动端访问时
屏幕右侧出现的侧边栏是怎么做的,同时也支持置顶和置底的操作
尽管也知道这个网站是用vuepress去搭建的,但是依旧好奇,想实现这个效果,但不知道如何下手,今天就统一的在这里记录分享一下
# 添加全局组件
在/.vuepress/components/global/RightBar.vue,创建一个全局组件
内部组件会自动根据文件名注册成全局组件
然后在md文件中,引入
<global-RightBar />
1
完整代码如下所示:
<template>
<div>
<div class="right-bar-wrap" v-show="isRightBar">
<div>
<a href="#">
<img width="30" height="30" :src="rightbar.topImg" alt="置顶" />
</a>
</div>
<div>
<a href="/latestarticle/">
<img width="30" height="30" :src="rightbar.newImg" alt="最新" />
</a>
</div>
<div @click="handleKeQun('https://kequn.itclan.cn/app/index.php?i=2&c=entry&do=index&m=dc_sqjd&state=index&rand=68drdo&spread=0#/')">
<img width="30" height="30" :src="rightbar.keQunImg" alt="社群" />
</div>
<div>
<img
width="30"
height="30"
class="medium-zoom lazy"
loading="lazy"
:src="rightbar.buyImg"
alt="小程序码"
/>
</div>
<div>
<img
width="30"
height="30"
class="medium-zoom lazy"
loading="lazy"
:src="rightbar.codeImg"
alt="二维码"
/>
</div>
<div>
<img
width="30"
height="30"
class="medium-zoom lazy"
loading="lazy"
:src="rightbar.publicodeImg"
alt="公众号"
/>
</div>
<div @click="handleAd('http://itclancoder.mikecrm.com/z1zXWvz')">
<img width="30" height="30" :src="rightbar.adImg" alt="广告" />
</div>
<div @click="handleFaKa('https://faka.itclan.cn')">
<img width="30" height="30" :src="rightbar.fkImg" alt="发卡">
</div>
<div @click="handleKelaiTV('https://video.itclan.cn')">
<img width="30" height="30" :src="rightbar.videotvImg" alt="客来影视">
</div>
<div
@click="
handleShange(
'https://www.zhi12.cn/paycenter/reward/widget?entity=user&id=33813'
)
"
>
<img width="30" height="30" :src="rightbar.shangImg" alt="赏" />
</div>
<div>
<a href="#bottom">
<img width="30" height="30" :src="rightbar.bottomImg" alt="置底" />
</a>
</div>
</div>
</div>
</template>
<script>
import rightbar from "../../public/js/ationfixed";
export default {
name: "RightBar",
data() {
return {
isRightBar: false, // 侧边栏默认隐藏
rightbar: rightbar.mobileslides,
};
},
mounted() {
window.addEventListener("scroll", this.scroll); // 绑定监听scroll事件
},
destroyed() {
window.removeEventListener("scroll", this.scroll); // 解绑监听scroll事件
},
methods: {
scroll() {
const that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 60) { // 这里是实现,当滚动条滚动高度大于60px,就显示右侧的侧边栏,否则就隐藏
that.isRightBar = true;
} else {
that.isRightBar = false;
}
},
handleAd(openUrl) {
this.$dialog
.confirm({
title: "温馨提示",
message: "亲,这里接受广告主投放,可前往了解一下",
theme: "round-button",
showCancelButton: true,
cancelButtonColor: "#ccc",
})
.then(() => {
// on confirm 确认
window.open(openUrl, "_blank");
})
.catch(() => {
// on cancel // 取消
});
},
handleKeQun(openUrl) {
this.$dialog
.confirm({
title: "温馨提示",
message: "亲,在这里可以加各种群,发广告,发名片,开始你的探索吧",
theme: "round-button",
showCancelButton: true,
cancelButtonColor: "#ccc",
})
.then(() => {
// on confirm 确认
window.open(openUrl, "_blank");
})
.catch(() => {
// on cancel // 取消
});
},
// 发卡商城
handleFaKa(openUrl) {
this.$dialog
.confirm({
title: "温馨提示",
message: "亲,您将前往发卡商城,开始寻找对您有价值的商品吧",
theme: "round-button",
showCancelButton: true,
cancelButtonColor: "#ccc",
})
.then(() => {
// on confirm 确认
window.open(openUrl, "_blank");
})
.catch(() => {
// on cancel // 取消
});
},
handleKelaiTV(openUrl) {
this.$dialog
.confirm({
title: "温馨提示",
message: "亲,您将前往客来影视TV,更多好电影,电视剧等你看哦",
theme: "round-button",
showCancelButton: true,
cancelButtonColor: "#ccc",
})
.then(() => {
// on confirm 确认
window.open(openUrl, "_blank");
})
.catch(() => {
// on cancel // 取消
});
},
handleShange(openUrl) {
this.$dialog
.confirm({
title: "打赏鼓励",
message: "如果您喜欢本站或本站内容对您有所帮助,您的支持就是我的动力",
theme: "round-button",
showCancelButton: true,
cancelButtonColor: "#ccc",
})
.then(() => {
// on confirm 确认
window.open(openUrl, "_blank");
})
.catch(() => {
// on cancel // 取消
});
},
},
};
</script>
<style lang="stylus" scoped>
/*大于960时,隐藏侧边栏*/
@media screen and (min-width: 960px) {
.right-bar-wrap {
display: none;
}
}
@media screen and (max-width: 768px) {
.right-bar-wrap {
position: fixed;
right: 0.15rem;
top: 20%;
display: flex;
flex-direction: column;
z-index: 888;
img {
border: 1px solid #3eaf7c;
border-radius: 4px;
width: 30px;
height: 30px;
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
然后在.vuepress/configs/plugin.js,里全局注册,我这里使用的是vuepress1.0的配置的,如果你使用的是vuepress2.0的那么就不能使用这种方式注册组件
具体可以参见vuepress官网,在vuepress2.0中,需要引入注册组件插件,也就是@vuepress/plogin-register-component
以下是vuepress2.0注册全局组件方式
const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
export const pligins: any = {
registerComponentsPlugin({
componentsDir:path.resolve(__dirname,'../../','components')
})
}
1
2
3
4
5
6
7
2
3
4
5
6
7
经过这样的设置后,在components目录下的xxx.vue组件都会被注册成全局组件
如果你是vuepress1.0的那么在.vuepress/configs/plugin.js中的Plugin中,如下配置即可
const plugins = [
[
{
// 右边固定栏
name: 'page-plugin',
globalUIComponents: [
'global-RightBar',
],
},
],
];
module.exports = plugins; // 导出
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
经过上面的全局注册注册组件,那么在所有地方都有了的
# 网站的置顶和置底操作
置顶操作,使用的是a链接的锚点#
<a href="#">置顶</a>
1
而置底操作,也是使用的描点#,在置底操作时,我是定义了一个全局的组件(ToBottom.vue),给容器赋值了一个id属性,组件如下所示
<template>
<div>
<div id="bottom"></div>
</div>
</template>
<script>
export default {
name: "ToBottom"
};
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
在置底操作时,使用a链接,href="#bottom",id的值与href的值保持一致就可以
就是这么简单,至于侧边栏点击图片,能够实现缩放,是使用vuepress提供的这个@vuepress/plugin-medium-zoom这个插件
# 总结
在移动端实现固定侧边栏,很简单,定义一个全局组件,插入到网站中,而实现置顶和置底则使用的是描点,即可实现
在网站当中每个空间都尤其珍贵,在不影响阅读体验的情况下,是可以插入一些自定义元素的
分享
留言
解答
收藏
