Vue组件(点击返回顶部)

封装的返回顶部组件

1. 在components文件夹下创建 ClientHeight.vue 和 index.js 文件

 //ClientHeight.vue配置
<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(){
        // console.log(window.document.documentElement.clientHeight); 
        //获取页面可视化高度

       window.addEventListener("scroll",()=>{
        //  console.log(document.documentElement.scrollTop);  
        //获取页面滚动的高度
           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(//static1.qianqian.com/web/st/images/icon-back2top2.af69f845890e1a53.png)
        no-repeat 0 0;
    -webkit-background-size: 39px 39px;
    background-size: 39px 39px;
    width: 39px;
    height: 39px;
}
</style>

1. 同级 index.js 导出

import ClientHeight from './AA/ClientHeight'
export default (Vue)=>{
    Vue.component(ClientHeight.name,ClientHeight);
}

1. main.js 文件引入

import ClientHeight from './components/ClientHeight/index'
Vue.use(ClientHeight);

1. App 中使用 ：<ClientHeight/>