Vue+element-ui realizes the anchor icon button with prompt
Article Directory
case scenario
On the homepage of a website with a top navigation bar, the top and bottom are divided into several display areas with different content. It is required to be able to quickly locate through the anchor button on the side, and the anchor button is an icon button. When the mouse hovers, the icon will turn into a text prompt (such as CSDN).
development environment
View2、Element UI
Implementation plan
Taking the CSDN anchor button as the goal, you can use element-ui's rounded corner icon and el-icon as the basic button, and then add floating event extension effects, and the anchor point jump can be realized by positioning the dom element.
Preparation:
- Create 4 div blocks on the page, with a width of 100vw and a height of 70vh, each with a different id:
#top,#goods,#discount,#present - Create a sticky top navigation bar in the page with a height of 5rem
Implementation process:
- Create 1 anchor box and 4 rounded icon buttons
<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>
- Fix the anchor box at the bottom of one side of the screen, and increase the layer to ensure that it is not covered by other elements
.anchor-tool {
position: fixed;
padding-left: 16px;
z-index: 2;
bottom: 10vh;
}
- Turn the el-button into a block to arrange it up and down, remove the outer margin of the el-button, and set an appropriate spacing distance of 8px
.anchor-tool {
position: fixed;
padding-left: 16px;
z-index: 2;
bottom: 10vh;
> * {
display: block;
margin: 0 !important;
margin-bottom: 8px !important;
}
}
- Add click anchor jump event for button
<el-button @click="goAnchor(target)" icon="el-icon-goods" circle></el-button>
goAnchor method, pass in the id of the jump target dom element, and control the slider to slide the corresponding position
goAnchor(id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth',
});
},
- At this time, you will find that after clicking, the upper part of the target area is covered by the navigation bar. At this time, we add an 8rem upper distance to the slider instead of a height of 5rem for the navigation bar, because the top is directly attached to the navigation bar and is not on the page. center of
<style>
html {
/** 导航栏高5rem，滚动条距顶8rem是为了让锚点跳转时处于更中心的位置*/
scroll-padding-top: 8rem;
}
</style>
- Add a floating prompt effect to the anchor button. At this time, it is realized through js. The original button is integrated, and it is difficult to replace the content. Therefore, it needs to be refactored, and the button is split into two layers. Because we need to replace the el- The content of the button, and the icon and text are two incompatible elements, which can be dynamically rendered by 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>
Anchor button changed to data-driven dynamic rendering
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>' }
]
}
}
The method triggered by @mouseenter exchanges the prompt content and icon content, and renders the text prompt when the mouse hovers over the button ( switchAnchorContent is a function to exchange the hint and content of the item, so it will not be displayed)
onAnchorBtn(item) {
//switchAnchorContent是一个交换item的hint和content的函数，就不摆出来了
this.switchAnchorContent(item);
},
The method triggered by @mouseleave , change the content back when the mouse leaves, and restore the icon
leaveAnchorBtn(item) {
this.switchAnchorContent(item);
}
- At this time, it is basically realized, but there is still a flaw, that is, the button will shake when it is suspended. This is because the font in the el-icon is different from that in our div. Just set the font size to be the same.
.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’s anchor button prompt text is 4 characters. If we also want to make 4 characters, just adjust the size of the button and the size of the content to ensure that the content will not be squeezed into the outer frame of the button and cause deformation. At the same time, the size of the icon and The size of the text div block should be consistent, and this article will not demonstrate it here.