vue arco.design錨點(diǎn)Anchor使用方式
更新時(shí)間：2024年04月28日 09:31:18 作者：咩系咩
這篇文章主要介紹了vue arco.design錨點(diǎn)Anchor使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
1.vue3使用a-anchor錨點(diǎn)
快速找到信息內(nèi)容在當(dāng)前頁(yè)面的位置
代碼如下（示例）：
<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 設(shè)置為false
- scroll-container 要指定滾動(dòng)容器
scroll-container="#container"
<div id="container" class="content">
3.效果圖
官網(wǎng)：(https://arco.design/vue/component/anchor)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vxetable的高亮行不顯示的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
uniapp前端實(shí)現(xiàn)微信支付功能全過(guò)程(小程序、公眾號(hào)H5、app)
這篇文章主要介紹了uniapp前端實(shí)現(xiàn)微信支付功能的相關(guān)資料,通過(guò)uniapp開發(fā)跨平臺(tái)應(yīng)用時(shí),需要處理不同平臺(tái)的支付方式,包括微信小程序支付、公眾號(hào)H5支付和App支付,需要的朋友可以參考下2024-09-09
vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼
這篇文章主要介紹了vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue.js 表單校驗(yàn)插件的相關(guān)資料,需要的朋友可以參考下2016-08-08
Vue3+Vite+TS使用elementPlus時(shí)踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時(shí)踩的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue-router 中 meta的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vue自定義名稱下載PDF,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-04-04
vue.js實(shí)現(xiàn)簡(jiǎn)易折疊面板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10