element-ui中backTop组件的使用

Posted 2020-12-16 a973692898

其实官方示例给的挺明确的，只是我一开始自作聪明。。。

把<template></template>给干掉了，然后就各种各样的不能实现，

 

我总结下：

　　　　1.首先给一个要返回顶部的地方，而且得是个有高度的

　　　　例子： <div class=‘firset-herad></div> 这是我最外层的div，给.firset-herad设置一个高度，height：100%

　　　　2.在<div class=‘firset-herad>中最上边写<template>

　　　　例子：<div class=‘firset-herad‘>

　　　　　　　　　<template>

　　　　　　　　　　<el-backtop

　　　　　　　　　　　　　　　　target=‘.firset-herad‘ //触发滚动的对象

　　　　　　　　　　　　　　　　:right=‘40‘　　　　   //距离右边的距离

　　　　　　　　　　　　　　　　:bottom=‘100‘　　　//距离底部的距离

　　　　　　　　　　　　　　　　;visibility-height=‘400‘> //滚动高度达到此参数值才出现,控制显示与隐藏

　　　　　　　　　　　<div>

　　　　　　　　　　　　<i class=‘el-icon-top‘></i>  //我这里使用的element-ui中的图标当做按钮

　　　　　　　　　　　</div>

　　　　　　　　　　</el-backtop>

　　　　　　　　　</template>　

　　　　　　　</div>