关于vue.js: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/>