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块大小一致即可,本文在这里不再做演示。