element-ui二次封装实现全局回到顶部组件

前言

在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。

一、实现方法

需先在项目中安装 element-ui：Vue项目使用element-ui

1.创建 BackTop 组件

在 components 文件夹创建 backTop 文件夹，然后在 backTop 文件夹中再创建 BackTop.vue 。

BackTop.vue 代码如下：

<template>
  <div class="pages-content-scroll">
    <el-backtop target=".pages-content-scroll"></el-backtop>
    <slot></slot><!--留一个位置插入内容-->
  </div>
</template>

<script>


export default {
  name: 'BackTop',
  components: {},
  props:{},
  data(){
      return{}
  },
  methods:{},
  mounted(){

  }
}
</script>

<style scoped lang="scss">
    .pages-content-scroll{
        /*必须撑满整个屏幕*/
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-x: hidden;
    }
</style>

2.全局注册组件

在项目根目录下创建 globalComponents 文件夹，在其下新建 index.js， 用于注册全局组件

index.js 代码如下：

//注册全局组件
import Vue from "vue"
import BackTop from "../components/backTop/BackTop" //引入

Vue.component('backTop', BackTop) //注册

3.使用组件

1.在 views 文件夹下新建两个视图：BackTopOne.vue 和 BackTopTwo.vue
BackTopOne.vue 代码如下：

<template>
  <div >
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <div>这是回到顶部页面1</div>
    <!--让页面内容尽量的多，超过屏幕高度，这里省略了，不占空间-->
  </div>
</template>

<script>


export default {
  name: 'BackTopOne',
  components: {},
  props:{},
  data(){
      return{}
  },
  methods:{},
  mounted(){

  }
}
</script>

BackTopTwo.vue 代码如下：

<template>
  <div >
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <div>这是回到顶部页面2</div>
    <!--让页面内容尽量的多，超过屏幕高度，这里省略了，不占空间-->
  </div>
</template>

<script>


export default {
  name: 'BackTopTwo',
  components: {},
  props:{},
  data(){
      return{}
  },
  methods:{},
  mounted(){

  }
}
</script>

2.配置页面路由
router 中的 index.js 代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/backTopOne',
    name: 'backTopOne',
    component: () => import('../views/BackTopOne')
  },
  {
    path: '/backTopTwo',
    name: 'backTopTwo',
    component: () => import('../views/BackTopTwo')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.在Home.vue 实现两个页面跳转按钮
Home.vue 代码如下：

<template>
  <div >
    <el-button 
    type="primary" 
    @click="goTo('/backTopOne')">
    去往页面1
    </el-button>
    <el-button 
    type="primary" @click="goTo('/backTopTwo')">
    去往页面2
    </el-button>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {
  },
  methods:{
    goTo(path){ //路由跳转
      this.$router.push(path)
    }
  }
}
</script>

4.在App.vue 使用全局注册的 backTop 组件
App.vue 代码如下：

<template>
  <div >
    <backTop>
      <router-view/>
    </backTop>
  </div>
</template>

<style lang="scss">

</style>

二、组件效果

1.点击前往页面1按钮，进入页面1

2.下拉滚动条，会出现回到顶部按钮，点击即可回到顶部

3.点击前往页面2按钮，进入页面2

4.下拉滚动条，会出现回到顶部按钮，点击即可回到顶部

总结

以上内容我们在 element-ui 的基础上，对 el-backtop 组件再封装，使之可以在全局中使用，视图的内容插入其中，而无需单独调用。