封装的返回顶部组件

  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/>