vue arco.design锚点Anchor使用方式
作者：咩系咩
这篇文章主要介绍了vue arco.design锚点Anchor使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.vue3使用a-anchor锚点
快速找到信息内容在当前页面的位置
代码如下（示例）：
<template>
<div class="agreement">
<div class="pane">
<div id="container" class="content">
<div id="basic">
<h1>Basic</h1>
<div style="height: 600px"></div>
</div>
<div id="line-less">
<h1>LineLess Mode</h1>
<div style="height: 600px"></div>
</div>
<div id="Lake">
<h1>StreamLake</h1>
<div style="height: 600px"></div>
</div>
</div>
<div class="title">
<a-anchor line-less :change-hash="false" scroll-container="#container">
<a-anchor-link href="#basic" rel="external nofollow" >Basic</a-anchor-link>
<a-anchor-link href="#line-less" rel="external nofollow" >LineLess Mode</a-anchor-link>
<a-anchor-link href="#Lake" rel="external nofollow" >StreamLake</a-anchor-link>
</a-anchor>
</div>
</div>
</div>
</template><script lang='ts' setup>
</script>
<style lang='scss' scoped>
.agreement {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.pane {
display: flex;
justify-content: space-between;
margin: $margin;
padding: $padding;
height: calc(100% - 60px);
background: $color-bg-box;
.content {
width: calc(100% - 250px - 32px);
padding-right: 16px;
height: 100%;
overflow-y: auto;
border-right: 1px solid $color-border;
}
.title {
width: 250px;
padding-left: 16px;
}
}
}
</style>2.注意！注意！注意！
- change-hash 设置为false
- scroll-container 要指定滚动容器
scroll-container="#container"
<div id="container" class="content">
3.效果图
官网：(https://arco.design/vue/component/anchor)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。