vue+element-ui实现带提示的锚点图标按钮

vue+element-ui实现带提示的锚点图标按钮

案例情景

在一个有顶部导航栏的网站首页，上下分成好几个不同内容的展示区，要求能通过侧边的锚点按钮快速定位，并且锚点按钮是一个图标按钮，鼠标悬浮时图标会转为文字提示（如CSDN这种）。

开发环境

Vue2、Element UI

实现方案

以CSDN锚点按钮为实现目标，可以用 element-ui 的圆角图标配合 el-icon做基础按钮，再添加悬浮事件扩展特效，而锚点跳转可以通过dom元素定位来实现。

准备工作：

1. 在页面中创建4个div块，宽度100vw，高度可以长一点，70vh，各自赋予不同的id：#top、#goods、#discount、#present
2. 在页面中创建一个粘在顶部的导航栏，高度为5rem

实现流程：

1. 创建1个锚点盒子和4个圆角图标按钮

<div class="anchor-tool">
  <el-button icon="el-icon-top" circle></el-button>
  <el-button icon="el-icon-goods" circle></el-button>
  <el-button icon="el-icon-discount" circle></el-button>
  <el-button icon="el-icon-present" circle></el-button>
</div>

2. 将锚点盒子固定在屏幕一侧的底端，并提高图层保证能不被其它元素所覆盖

.anchor-tool {
  position: fixed;
  padding-left: 16px;
  z-index: 2;
  bottom: 10vh;
}

3. 将el-button转为块，从而上下排列，同时去掉el-button的外边距，并设置合适的间隔距离8px

.anchor-tool {
  position: fixed;
  padding-left: 16px;
  z-index: 2;
  bottom: 10vh;

  > * {
    display: block;
    margin: 0 !important;
    margin-bottom: 8px !important;
  }
}

4. 为按钮添加点击的锚点跳转事件

<el-button @click="goAnchor(target)" icon="el-icon-goods" circle></el-button>

goAnchor方法，传入跳转目标dom元素的id，并控制滑动条滑相应位置

goAnchor(id) {
  document.querySelector(id).scrollIntoView({
    behavior: 'smooth',
  });
},

5. 此时会发现，点击后，目标区域的上部被导航栏遮住了，此时我们为滑动条添加一个8rem上距，不用导航栏的高度5rem，是因为顶端直接贴着导航栏而没有处于页面的较中心

<style>
html {
  /** 导航栏高5rem，滚动条距顶8rem是为了让锚点跳转时处于更中心的位置*/
  scroll-padding-top: 8rem;
}
</style>

6. 为锚点按钮添加悬浮提示效果，此时通过js去实现，原先的按钮是一体的，难以实现更换内容，因此需要重构一下，把这个按钮拆成2层，由于我们需要悬浮时替换el-button的内容，而图标和文字属于两种不兼容的元素，可以通过v-html来动态渲染

<div v-for="(item,idx) in anchorBtns" :key="idx" @mouseenter="onAnchorBtn(item)"        @mouseleave="leaveAnchorBtn(item)">
  <el-button @click="goAnchor(item.target)" v-html="item.content" circle></el-button>
</div>

锚点按钮改为数据驱动的动态渲染

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>' }
    ]
  
  }
}

@mouseenter触发的方法，交换提示内容和图标内容，让鼠标悬浮按钮时渲染文字提示（switchAnchorContent是一个交换item的hint和content的函数，就不摆出来了）

onAnchorBtn(item) {
  //switchAnchorContent是一个交换item的hint和content的函数，就不摆出来了
  this.switchAnchorContent(item);
},

@mouseleave触发的方法，鼠标离去时把内容再换回来，恢复图标

leaveAnchorBtn(item) {
  this.switchAnchorContent(item);
}

7. 此时基本上实现了，但还存在一个瑕疵，就是悬浮时按钮会抖一下，这是因为el-icon和我们div里的字体不一样导致的，设置字体大小一样即可

.anchor-tool {
  position: fixed;
  padding-left: 16px;
  z-index: 2;
  bottom: 10vh;

  > * {
    display: block;
    margin: 0 !important;
    margin-bottom: 8px !important;

    > * {
      /**规定el-icon和div字体一样大，防止按钮切换内容时因规格不一致而变形 */
      font-size: 1rem !important;
    }
  }
}

8. CSDN的锚点按钮提示文字是4个字，我们也想做4个字的话，只要调整按钮的大小以及内容的大小，保证内容不会挤压到按钮的外框导致变形，同时图标的大小和文字div块大小一致即可，本文在这里不再做演示。