Element-ui不用多说，用vue的基本都会用到它。但是它的官方文档却有些不严谨的地方，最近我就在弄一个返回顶部的功能的时候遇到坑了。废话不多说，先上官方文档示例介绍：
Scroll down to see the bottom-right button.
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
这个是基础用法，自定义用法跟这个也差不多，就是中间加了些样式。
看起来这个例子很简单对不对，按照最简单的原则拿过来就用，ctrl+c到自己项目后就等着出现回到顶部按钮，结果实际结果却令我大失所望，直接报错了。错误原因就是找不到el-scrollbar__wrap。
既然给出了原因，那解决应该很简单，不是找不到这个样式吗，那我就在外层套个div 然后定义个class=el-scrollbar__wrap，心想这下子应该是可以了吧。结果运行的时候错误是没有了，但是那个心心念念的回到顶部按钮怎么都出现不了，难道是我姿势不对？然后我就再外面又套了div class=page-component__scroll，但是还是没有卵用。
我开始怀疑人生了，什么鬼，都这样了还不见效，难道我项目里面有问题，算了。我直接在官网的在线运行里面跑，结果是真的啥也没有。这下我就怀疑官方给demo有问题了，我开始搜GitHub的issue，果然找到了一堆跟我有一样问题的小伙伴。原来官网给的示例是没有效果的，还有一些隐藏条件。
条件如下：
.el-scrollbar__wrap {
overflow: scroll;
height: 100%;
}
其次父元素必须指定高度，否则依然是没有效果的：
.page-component__scroll {
height: 500px;
}
这里还有个坑，虽然至此，回到顶部按钮效果是可以出现了，但是也发现了.page-component__scroll这个元素的高度是定死的，这样是不合理的。小伙伴们肯定会说了，这还不简单直接设置个100%不就可以了。注意了，坑来了，如果直接设置100% 或者auto，回到顶部按钮效果就会不起作用了，也就是又直接失效了。
至此我又怀疑人生了，这特么啥玩意组件，我都想弃用了，但是看了官网的效果，它又确实很完美。到底是哪里出了问题，然后询问了个资深前端大佬。终于找到完美的解决方案了，请看如下：
html,body {
height: 100%;
}
加了以上设置后，.page-component__scroll就的高度就可以设置为100%或者auto了，这里还有个小坑要注意，如果.page-component__scroll的直接父元素并不是body，也就是它上面还有其他的div那么它上面的所有的div的样式都要加上height:100%。 否则回到顶部按钮还是不会出现效果的。
终极使用示例：
<template>
<div id="app">
<div class="content">
<div class="backtop"></div>
<el-backtop target=".content .backtop"></el-backtop>
</div>
</div>
</template>
<style>
html,body {
height: 100%;
}
#app {
height: 100%;
}
.content {
height: 100%;
}
.backtop {
overflow: scroll;
height: 100%;
}
</style>
当然如果你的.content不需要填满，只需要指定为固定的高度，那么#app的高度样式就可以去掉了，否则#app的高度必须设置为100%。
好了，以上就是这个组件使用的一些坑，不得不吐槽一下官方文档还是有点敷衍。毕竟给示例都是直接拿来就可以运行出效果的，这些隐藏条件都不做个说明，有没有考虑过后端程序员的感受。
网友评论