element-ui回到顶部组件el-backtop的全局注册,按需使用

前置bug: 直接在子页面添加el-backtop组件没有生效
后续修改: 在layout页面添加el-backtop组件, 按需展示

实现原理:
一般在项目的layout布局页面, el-main板块可滑动,因此针对el-main板块做回到顶部的操作,然后根据页面的路由来按需展示该功能, 上代码

-----layout.vue

<template>
  <div>
  	<el-header></el-header>
  	<el-container>
  		<el-aside><el-aside>
  		<el-main class="app-main"></el-main>
  	</el-container>
    <!-- 回到顶部, 按需添加功能 -->
    <el-backtop target=".app-main"  bottom="100">
      <i class="el-icon-top"
         style="font-weight:600"></i>
    </el-backtop>
  </div>
</template>

说明：

1. 已经注册element的前提下, 直接使用el-backtop标签即可
2. target表示目标dom, 这里即为el-main盒子的类名
3. 用v-if进行按需展示, 需要的页面将路由写进判条件即可
4. el-backtop里面包裹的内容可以自定义换成需要的样式