- 在components文件夹下创建 ClientHeight.vue 和 index.js 文件
<template>
<div class="th-back-top" v-show="flag" @click="clickHidden">
<span class="bg-back2top2"></span>
</div>
</template>
<script>
export default {
name:"BackTop",
data(){
return{
flag:false
}
},
mounted(){
window.addEventListener("scroll",()=>{
let scrollTop = document.documentElement.scrollTop;
if(scrollTop > 100){
this.flag = true;
}else{
this.flag = false;
}
})
},
methods:{
clickHidden(){
document.documentElement.scrollTop = 0;
}
}
}
</script>
<style scoped>
.th-back-top{
position:fixed;
right:15px;
bottom:104px;
height: 39px;
width: 80px;
z-index:9;
opacity:0.8;
text-align:right;
}
.bg-back2top2 {
display: inline-block;
background: url(
no-repeat 0 0;
-webkit-background-size: 39px 39px;
background-size: 39px 39px;
width: 39px;
height: 39px;
}
</style>
- 同级 index.js 导出
import ClientHeight from './AA/ClientHeight'
export default (Vue)=>{
Vue.component(ClientHeight.name,ClientHeight);
}
- main.js 文件引入
import ClientHeight from './components/ClientHeight/index'
Vue.use(ClientHeight);
- App 中使用 :
<ClientHeight/>