欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue arco.design錨點(diǎn)Anchor使用方式

 更新時(shí)間：2024年04月28日 09:31:18   作者：咩系咩  
這篇文章主要介紹了vue arco.design錨點(diǎn)Anchor使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.vue3使用a-anchor錨點(diǎn)

快速找到信息內(nèi)容在當(dāng)前頁面的位置

代碼如下（示例）：

<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)文章

最新評論