当前位置：首页 > news >正文

自定义实现elementui的锚点

news 来源：原创 2025/5/1 6:35:00

背景

前不久有个需求，上半部分是el-step步骤条，下半部分是一些文字说明，需要实现点击步骤条中某个步骤自定义定位到对应部分的文字说明，同时滚动内容区域的时候还要自动选中对应区域的步骤。element-ui-plus的有锚点这个组件，但是他的触发内容是三个div，我的是一个组件，所以当时就没用这个，直接就重写了。

实现：

在el-step上添加click事件

// 使用scroll来滚动到对应的内容区域
const scroll = (stepNumber: number) => {// contentRef为对应的内容区域上的refconst targetElement = contentRef.value[stepNumber];if (targetElement) {nextTick(() => {targetElement.scrollIntoView({behavior: 'smooth',block: 'start',});});}
};

使用html5的API - IntersectionObserver来实现监听滚动区域，然后给对应区域的step赋值。

在onmounted中调用方法去new IntersectionObserver();

onMounted(() => {initObserver();
});// 监听滚动
const initObserver = () => {const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {const index = contentRef.value.findIndex((el: any) => el === entry.target,);// activeStep就是el-steps上绑定的:activeif (index !== -1) {activeStep.value = index;}}});},// rootRef就是对应滚动内容的父容器的ref{root: rootRef.value, // 监听tip里的视口threshold: 0.9, // 90%进入视图时才触发},);contentRef.value.forEach((el: any) => observer.observe(el));
};

html结构

    <div><el-steps :active="activeStep"><el-stepv-for="(item, index) in steps":key="index":title="item.title"@click.native="scroll(index)"></el-step></el-steps></div><div ref="rootRef"><divv-for="(img, index) in imgs":key="index"class="imgContainer"ref="contentRef"><img :src="img.src"/></div></div>