vue（install）注册全局组件---以回到顶部功能为例

一、需求说明：列表内容过长，需要在超过一屏之后添加回到顶部的效果。

二、功能实现：
1.先在components文件夹里建立一个goTop的文件夹，文件夹内建立一个goTop.js和goTop.vue文件。

2.goTop.js

import goTopComponent from './goTop.vue'
const top = {
    install:function(Vue) {
        Vue.component('goTop', () =>goTopComponent)
    }
}

export default top ;

3.goTop.vue

<template>
  <div class="topIcon" @click="scrollTop"  v-show="visible">
    <img src="top.png"/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      visible:false
    }
  },
  mounted(){
    // 获取当前总高度 和内容所占高度 如果内容大于原始高度 那就绑定事件
    document.addEventListener('scroll',this.scrollEvent)
  },
  beforeDestroy() {
    //页面注销时清除滚动事件
    document.removeEventListener("scroll", this.scrollEvent);
  },
  methods: {
    // 滚动事件
    scrollEvent(){
      this.visible = window.pageYOffset > 20
    },
    // 滚动到顶部
    scrollTop() {
      window.scrollTo(0, 0);
    },
  },
};
</script>

4.在main.js中全局引入：

import topIcon from './components/goTop/goTop.js'
Vue.use(topIcon)

5.使用页面中引入

 <top-icon />