vue实现一个右侧悬浮工具栏

最近在写商城时需要用到一个右侧悬浮的工具栏，并把这个写成了控件，刚开始是想要使用elementui自带的backtop组件的，无奈能力有限，不能改造成多列的结果，所以就只能自己写一个了

这个控件实现的功能为，一开始只有3个内容，当页面下滑后会多出一个回到顶部的内容，并使用定时器连贯的回到顶部

注意：这里需要用到elementui，请去按照官网 https://element.eleme.cn/#/zh-CN/component/quickstart 的说明去进行插件的安装

html部分

<template>

<div :class="tops?'navbar':'navbar-top'">

<el-tooltip class="item" effect="dark" content="购物车" placement="left">

<el-badge :value="12" class="item">

<a><i class="el-icon-shopping-cart-2"></i></a>

</el-badge>

</el-tooltip>

<el-tooltip class="item" effect="dark" content="客服" placement="left">

<a><i class="el-icon-service"></i></a>

</el-tooltip>

<div class="qrShow right" v-if="showQR">

<el-image

style="width: 100px; height: 100px;border-radius: 8px;"

src="static/img/rightBar/qrcode.jpg"

fit="cover">

</el-image>

</div>

<a @mouseover="showQRCode" @mouseleave="hideQRCode"><i class="el-icon-full-screen"></i></a>

<el-tooltip class="item" effect="dark" content="返回顶部" placement="left" v-if="tops">

<a @click="gotop"><i class="el-icon-caret-top"></i>

<br>

<span>顶部</span></a>

</el-tooltip>

</div>

</template>

script部分

<script>

export default {

name: 'RightBar',

data () {

return {

showQR:false,

tops:false,

heights:window.innerHeight,

scrolltop:'',

};

},

mounted(){

window.addEventListener('scroll', this.scrollToTop)

},

destroyed () {

window.removeEventListener('scroll', this.scrollToTop)

},

methods:{

showQRCode(){//显示二维码

this.showQR = true

},

hideQRCode(){//隐藏二维码

this.showQR = false

},

scrollToTop () {

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

this.scrolltop = scrollTop

if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {

this.tops = true

} else {

this.tops = false

}

},

gotop () {

let timer = setInterval(() => {

document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90

if (this.scrolltop === 0) {

clearInterval(timer)

}

}, 15)

},

}

}

</script>

style部分

<style scoped>

.navbar {

text-align: center;

background-color: white;

position: fixed;

top: 68%;

right: 2%;

width: 55px;

height: 220px;

z-index: 999;

border-radius: 10px;

}

.navbar-top{

text-align: center;

background-color: white;

position: fixed;

top: 68%;

right: 2%;

width: 55px;

height: 165px;

z-index: 999;

border-radius: 10px;

}

.navbar a {

color: rgb(0, 0, 0);

text-decoration: none;

width: 100%;

height: 55px;

display: block;

font-size: 30px;

padding-top: 5px;

}

.navbar a:last-child{

color: rgb(0, 0, 0);

text-decoration: none;

width: 100%;

height: 55px;

display: block;

font-size: 15px;

border-radius: 0px 0px 10px 10px;

}

.navbar a:first-child{

color: rgb(0, 0, 0);

text-decoration: none;

width: 55px;

height: 55px;

display: block;

font-size: 30px;

border-radius: 10px 10px 0px 0px;

}

.navbar a:hover {

background-color: #d9534f;

color: white;

}

.navbar-top a {

color: rgb(0, 0, 0);

text-decoration: none;

width: 100%;

height: 55px;

display: block;

font-size: 30px;

padding-top: 5px;

}

.navbar-top a:last-child{

color: rgb(0, 0, 0);

text-decoration: none;

width: 100%;

height: 55px;

display: block;

font-size: 30px;

border-radius: 0px 0px 10px 10px;

}

.navbar-top a:first-child{

color: rgb(0, 0, 0);

text-decoration: none;

width: 55px;

height: 55px;

display: block;

font-size: 30px;

border-radius: 10px 10px 0px 0px;

}

.navbar-top a:hover {

background-color: #d9534f;

color: white;

}

.qrShow{

position: fixed;

top: calc(68% + 80px);

right: calc(3% + 60px);

z-index: 999;

background-color: rgb(179, 179, 179);

width: 110px;

height: 110px;

color: white;

text-align: center;

border-radius: 10px;

font-family: sans-serif;

padding-top: 5px;

}

.qrShow:after {

content: "";

position: absolute;

width: 0;

height: 0;

border: 8px solid;

}

.right:after {

border-left-color: rgb(179, 179, 179);

left: 100%;

top: 50%;

margin-top: -7px;

}

</style>