vue+element-ui backtop组件使用

48 阅读 0 评论 32 点赞

我是靠谱客的博主自信黑夜，最近开发中收集的这篇文章主要介绍vue+element-ui backtop组件使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

element-ui中的backtop返回顶部组件的使用

最近写的项目中用到了vue和element-ui实现前端页面，在最后写到返回顶部的时候，看到有自带的组件就直接使用了，但是在copy代码进去之后发现没生效。

找了不少文章，有些是直接copy了官方的文档，有的是给出了解决方案，但是没有说明，有点看不懂到底要怎么弄。

最后的最后，我差点就自己写原生。最终因为懒就没有自己写。

所以我仔细观察了下官方文档的使用方法之后，得出结论，需要自己写个内容区。

<div class="content-area">
	<el-backtop target="content-area"></el-backtop>
	<!-- 内容区代码 --?
</div>

	/* 我自己写的时候是scss */
  .content-area{
  	/* 这里高度减60像素减的是顶部导航条的高度。避免出现浏览器自带的滚动条 */
    height: calc(100vh - 60px);
    /* 溢出高度自动显示滚动条 */
    overflow: auto;
  }