TDesign锚点组件:解决点击锚点会导致路由跳转的问题

根据官网的示例,锚点组件的应用是这样写的:

<t-anchor>
    <t-anchor-item href="#进行中任务" title="进行中任务" />
    <t-anchor-item href="#待处理任务" title="待处理任务" />
    <t-anchor-item href="#待排期任务" title="待排期任务" />
</t-anchor>

<div id="进行中任务">进行中</div>
<div id="待处理任务">待处理</div>
<div id="待排期任务">待排期</div>

但是在哈希路由模式下,点击锚点会直接跳转到 http://localhost:8080/#进行中任务 ,和路由的跳转冲突。所以需要加一段代码来避免路由跳转。

<script setup>
setTimeout(() => {
    document.querySelectorAll('.t-anchor a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                block: "start",
                inline: "nearest",
                behavior: 'auto'
            });
        });
    });
}, 500);
</script>

代码可以加到使用到锚点组件的页面下,也可以加到app.vue里变成全局生效的配置。

posted @ 2025-05-10 10:44  deajax  阅读(63)  评论(0)    收藏  举报