element ui 右下角提示

element ui 右下角提示可以通过创建一个锚点盒子，并在盒子中添加四个圆角图标按钮来实现。可以使用 element-ui 的圆角图标配合 el-icon 创建基础按钮。然后，通过添加悬浮事件扩展特效来实现右下角提示的效果。锚点跳转可以通过使用dom元素定位来实现。具体的实现流程如下：

1. 创建一个锚点盒子，并在盒子中添加四个圆角图标按钮。
2. 将锚点盒子固定在屏幕的右下角，并提高图层保证能不被其他元素所覆盖。
3. 将按钮设置为块级元素，使其上下排列，并去掉按钮的外边距，同时设置合适的间隔距离。
4. 为按钮添加点击的锚点跳转事件。
5. 将锚点按钮改为数据驱动的动态渲染。

代码如下：

<div class="anchor-tool">
  <el-button @click="goAnchor(target)" icon="el-icon-top" circle></el-button>
  <el-button @click="goAnchor(target)" icon="el-icon-goods" circle></el-button>
  <el-button @click="goAnchor(target)" icon="el-icon-discount" circle></el-button>
  <el-button @click="goAnchor(target)" icon="el-icon-present" circle></el-button>
</div>

.anchor-tool {
  position: fixed;
  padding-left: 16px;
  z-index: 2;
  bottom: 10vh;
}
.anchor-tool > * {
  display: block;
  margin: 0 !important;
  margin-bottom: 8px !important;
}

export default {
  //...
  data() {
    //...
    anchorBtns: [
      { target: '#top', content: '<el-icon class="el-icon-top"></el-icon>', hint: '<div>顶</div>' },
      { target: '#goods', content: '<el-icon class="el-icon-goods"></el-icon>', hint: '<div>商</div>' },
      { target: '#discount', content: '<el-icon class="el-icon-discount"></el-icon>', hint: '<div>抢</div>' },
      { target: '#present', content: '<el-icon class="el-icon-present"></el-icon>', hint: '<div>租</div>' }
    ]
  }
}