Element-UI库的BackTop组件的二次封装

封装Backtop全局组件

1. components组件文件中新建backtop文件夹然后新建BackTop.vue

<!--  -->
<template>
  <div class = 'page-component_scroll'>
    <el-backtop target=".page-component_scroll"></el-backtop>
    <slot></slot>
   </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  components: {

  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.page-component_scroll{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}
</style>

2. 封装backtop全局组件
   @目录下新建globalComponents文件夹然后新建index.js

import Vue from 'vue'
import BackTop from '../components/backtop/BackTop.vue'

Vue.component('BackTop', BackTop)

3. 将全局组件注入到项目

import './globalComponents/index.js'

4. 使用backto全局组件
   App.vue页面直接使用

<back-top>
    <router-view></router-view>
</back-top>