vue3 锚点anchor scrollIntoView实现点击选项页面即滚动的效果

原创已于 2023-03-31 09:28:30 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-03-25 23:56:18 首次发布

Vue.js 专栏收录该内容

10 篇文章

订阅专栏

文章讲述了在Vue项目中，如何处理el-select组件的option选中后页面滚动到对应区域的问题。通过绑定DOM节点的id和处理change事件，利用typescript解决类型报错并实现锚点跳转功能。在change事件中调用自定义函数anchorToGroup，将选中的值转换为DOMid并使用scrollIntoView进行页面滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

锚点效果：当点击el-select的option后，页面滚动到对应区域

DOM节点绑定id变量

    <div class="category-title" :id="index">
      <h2> {{ index }} </h2>
    </div>

** debut：typescript**
注意：绑定id时报错：runtime-dom.d.ts(425, 3): 所需类型来自属性 “id”，在此处的 “ElementAttrs” 类型上声明该属性

虽然有报错，但可以用，原因是index被看作number，而id需要的是string，解决方式是点开runtime-dom.d.ts(425, 3)，id?:string之后添加 | number

El-select绑定change

当el-select的v-model值发生改变时触发change事件

<el-select v-model="groupSelected" class="groupSelected" placeholder="主页" style="width: 1rem;" @change="anchorToGroup">
  <el-option v-for="(item, index) in useAppStore.category" :key="index" :label="item" :value="item" />
</el-select>

锚点跳转事件anchorToGroup

// 自定义函数：锚点跳转分组
const anchorToGroup = (val:string) => {
  console.log('anchorToGroup val:', val)
  const domID = `#${val}`   // 转换成DOM节点的id值
  document.querySelector(domID)?.scrollIntoView(true)
}