vue3 封装城市选择组件实现点击字母跳转到对应城市位置

最新推荐文章于 2024-05-22 18:55:52 发布

jieyucx

最新推荐文章于 2024-05-22 18:55:52 发布

阅读量610

点赞数

分类专栏： vue的那些事 vue3从入门到精通文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jieyucx/article/details/128547469

版权

vue的那些事同时被 2 个专栏收录

52 篇文章 5 订阅

订阅专栏

vue3从入门到精通

35 篇文章 9 订阅

订阅专栏

vue3 封装城市选择组件实现点击字母跳转到对应城市位置

在这里插入图片描述
如图所示：
点击R,跳转到对应的r开头的城市

核心思路就是为每个字母设置一个id，然后当点击对应的字母时，根据id获取到对应的dom,然后用scrollIntoView()方法跳转到对应位置。

此时有的朋友可能会说可以用a标签锚点形式，但咱这是vue框架，没有匹配的路由是行不通的。

其实核心代码就两行如下：

// 点击字母区域
<div
  class="province-item"
  v-for="(item, index) in Object.keys(provinces)"
  :key="index"
  @click="clickChat(item)"
>
{{ item }}
</div>
let clickChat = (item: string) => {
  let el = document.getElementById(item)
  if (el) el.scrollIntoView()
}