ant design vue 锚点使用和普通的HTML 链接 - name 属性 - 锚（anchor）

最新推荐文章于 2024-03-29 19:25:44 发布

pipizhou16

最新推荐文章于 2024-03-29 19:25:44 发布

阅读量4.6k

点赞数 3

分类专栏： ant-design-vue 文章标签： vue.js html 前端 javascript

本文链接：https://blog.csdn.net/pipizhou16/article/details/125540376

版权

ant-design-vue 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

ant design vue 设置锚点

业务需求：动态设置楼层导航，根据返回楼层数，点击楼层，跳到对应的位置。

一、设置锚点 a-anchor

//循环的楼层  （下面有样式展示）
<div v-for="(item,j) in arrList" :key="item.floorsId" :id="j">
</div>

//楼层导航
<a-anchor :affix="false" :showInkInFixed="true">
   <div v-for="(item,j) in arrList" :key="item.floorsId" >
       <!-- <a-anchor :affix="false"> -->
         <a-anchor-link :href="'#'+j" >
           <template #title>
             <div class="text-10">
               {{item.floorsNo}} <span style="margin-left: 3px;">楼</span>

             </div>
           </template>
         </a-anchor-link>
   </div>
 </a-anchor>
 
1、href	锚点链接
2、id 是  上一步设置的 # 号 后面的内容    **href是根据id来跳转的。**
3、:affix="false" 时是否固定模式（不浮动，状态不随页面滚动变化。）  此时没有小圆圈
4、showInkInFixed	:affix="false" 时是否显示小圆点	默认为false	
5、<template #title>   title的插槽   可以自定义设置title

二、原理

1、href 锚点链接
2、id 是上一步设置的 # 号后面的内容 href是根据id来跳转的。

样式展示：

（数据是测试数据，楼层还没排序）
在这里插入图片描述

三、HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

具体使用案例：

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<div name="tips">1楼房间</div>


然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">跳转到一楼</a>

如果对你有用,点个赞呗！

⠀      ｡ﾟﾟ･｡･ﾟﾟ｡
         ﾟ。        ｡ﾟ
             ﾟ･｡･ﾟ
       ︵               ︵
    (        ╲       /       /
      ╲          ╲/       /
           ╲          ╲  /
          ╭ ͡   ╲           ╲
     ╭ ͡   ╲        ╲       ﾉ
╭ ͡   ╲        ╲         ╱
 ╲       ╲          ╱
      ╲         ╱
          ︶笔芯哦