Vue中UI库Ant Design Vue 回到顶部（BackTop）组件的使用

首先看下官方文档的使用说明，写出了以下范例：

1
2
3
4
5
6
7
8
9

<template>
    <div id="components-back-top-demo-custom">
      <a-back-top>
        <div class="ant-back-top-inner">
          <a-icon type="up"></a-icon>
        </div>
      </a-back-top>
    </div>
  </template>

可能有的开发人员会碰到回到顶部的图标并没有加载出来，F12看下页面源码也只有最外层DIV,而a-back-top,并没有渲染出来，也就是没有生效。

遇到这种情况是因为当前滚动区域并不是Window(整个视窗)，而是其中的某一块（DIV）;

也就是说要让BackTop生效，那么它所绑定的对象必须是可滚动的，这样才会生效。

这就要用到一个属性：target

我们调整以下刚刚的写法：

1
2
3
4
5
6
7
8
9

<template>
      <div id="components-back-top-demo-custom">
        <a-back-top :target="backtop">
          <div class="ant-back-top-inner">
            <a-icon type="up"></a-icon>
          </div>
        </a-back-top>
      </div>
    </template>

这个target是一个函数，返回的是可滚动区域对象：

1
2
3

backtop() {
   return document.querySelector("#contentC");
 }

这样BackTop的功能就生效了。

这里附上我使用的样式：

#components-back-top-demo-custom .ant-back-top-inner {
  cursor: pointer;
  height: 40px;
  width: 40px;
  line-height: 40px;
  background-color: #61AFEF;
  font-size: 20px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  float: right; 
  bottom: 8em;
  right: -2em;
  position: relative;
}

#components-back-top-demo-custom .ant-back-top-inner:hover {
  background-color: #6ED69F;
}