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()
}