vue+element-ui实现带提示的锚点图标按钮
案例情景
在一个有顶部导航栏的网站首页，上下分成好几个不同内容的展示区，要求能通过侧边的锚点按钮快速定位，并且锚点按钮是一个图标按钮，鼠标悬浮时图标会转为文字提示（如CSDN这种）。
开发环境
Vue2、Element UI
实现方案
以CSDN锚点按钮为实现目标，可以用 element-ui 的圆角图标配合 el-icon做基础按钮，再添加悬浮事件扩展特效，而锚点跳转可以通过dom元素定位来实现。
准备工作：
- 在页面中创建4个div块，宽度100vw，高度可以长一点，70vh，各自赋予不同的id：
#top、#goods、#discount、#present - 在页面中创建一个粘在顶部的导航栏，高度为5rem
实现流程：
- 创建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>
- 将锚点盒子固定在屏幕一侧的底端，并提高图层保证能不被其它元素所覆盖
.anchor-tool {
position: fixed;
padding-left: 16px;
z-index: 2;
bottom: 10vh;
}
- 将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;
}
}
- 为按钮添加点击的锚点跳转事件
<el-button @click="goAnchor(target)" icon="el-icon-goods" circle></el-button>
goAnchor方法，传入跳转目标dom元素的id，并控制滑动条滑相应位置
goAnchor(id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth',
});
},
- 此时会发现，点击后，目标区域的上部被导航栏遮住了，此时我们为滑动条添加一个8rem上距，不用导航栏的高度5rem，是因为顶端直接贴着导航栏而没有处于页面的较中心
<style>
html {
/** 导航栏高5rem，滚动条距顶8rem是为了让锚点跳转时处于更中心的位置*/
scroll-padding-top: 8rem;
}
</style>
- 为锚点按钮添加悬浮提示效果，此时通过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触发的方法，鼠标离去时把内容再换回来，恢复图标
扫描二维码关注公众号，回复：
15631772 查看本文章
leaveAnchorBtn(item) {
this.switchAnchorContent(item);
}
- 此时基本上实现了，但还存在一个瑕疵，就是悬浮时按钮会抖一下，这是因为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;
}
}
}
- CSDN的锚点按钮提示文字是4个字，我们也想做4个字的话，只要调整按钮的大小以及内容的大小，保证内容不会挤压到按钮的外框导致变形，同时图标的大小和文字div块大小一致即可，本文在这里不再做演示。