Python私教张大鹏 Vue3整合AntDesignVue之Anchor 锚点

本文主要是介绍Python私教张大鹏 Vue3整合AntDesignVue之Anchor 锚点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

用于跳转到页面指定位置。

何时使用

需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。

案例:锚点的基本使用

核心代码:

<template><a-anchor:items="[{key: 'part-1',href: '#part-1',title: () => h('span', { style: 'color: red' }, 'Part 1'),},{key: 'part-2',href: '#part-2',title: 'Part 2',},{key: 'part-3',href: '#part-3',title: 'Part 3',},]"/>
</template>
<script lang="ts" setup>
import { h } from 'vue';
</script>

vue3示例:

<script setup>
const menuItems = [{key: "index",href: "/",title: "首页"},{key: "auth",href: "/auth",title: "权限管理"},{key: "setting",href: "/setting",title: "配置管理"},
]
</script>
<template><a-anchor :items="menuItems"/>
</template>

在这里插入图片描述

案例:锚点的动态渲染

核心代码:

title: () => h('span', { style: 'color: red' }, 'Part 1'),

vue3示例:

<script setup>
import {h} from "vue";const menuItems = [{key: "index",href: "/",title: ()=> h('span', {style: 'color: red'}, "首页")},{key: "auth",href: "/auth",title: "权限管理"},{key: "setting",href: "/setting",title: "配置管理"},
]
</script>
<template><a-anchor :items="menuItems"/>
</template>

在这里插入图片描述

案例:横向锚点

设置 direction="horizontal" 能够实现横向锚点。

核心代码:

<template><divstyle="{padding: '20px';}"><a-anchordirection="horizontal":items="[{key: 'horizontally-part-1',href: '#horizontally-part-1',title: 'Part 1',},{key: 'horizontally-part-2',href: '#horizontally-part-2',title: 'Part 2',},{key: 'horizontally-part-3',href: '#horizontally-part-3',title: 'Part 3',},{key: 'horizontally-part-4',href: '#horizontally-part-4',title: 'Part 4',},{key: 'horizontally-part-5',href: '#horizontally-part-5',title: 'Part 5',},{key: 'horizontally-part-6',href: '#horizontally-part-6',title: 'Part 6',},]"/></div>
</template>

vue3示例:

<script setup>
import {h} from "vue";const menuItems = [{key: "index",href: "/",title: ()=> h('span', {style: 'color: red'}, "首页")},{key: "auth",href: "/auth",title: "权限管理"},{key: "setting",href: "/setting",title: "配置管理"},
]
</script>
<template><a-anchor :items="menuItems" direction="horizontal"/>
</template>

在这里插入图片描述

属性

成员说明类型默认值版本
affix固定模式booleantrue
bounds锚点区域边界number5(px)
getContainer指定滚动的容器() => HTMLElement() => window
getCurrentAnchor自定义高亮的锚点(activeLink: string) => string-activeLink(3.3)
offsetBottom距离窗口底部达到指定偏移量后触发number
offsetTop距离窗口顶部达到指定偏移量后触发number
showInkInFixed:affix="false" 时是否显示小方块booleanfalse
targetOffset锚点滚动偏移量,默认与 offsetTop 相同,例子numberoffsetTop1.5.0
wrapperClass容器的类名string-
wrapperStyle容器样式object-
items数据化配置选项内容,支持通过 children 嵌套{ key, href, title, target, children }[] 具体见-4.0
direction设置导航方向verticalhorizontalvertical
customTitle使用插槽自定义选项 titlev-slot=“AnchorItem”-4.0

子节点属性

成员说明类型默认值版本
key唯一标志string | number-
href锚点链接string-
target该属性指定在何处显示链接的资源string-
title文字内容VueNode | (item: AnchorItem) => VueNode-
children嵌套的 Anchor Link,注意:水平方向该属性不支持AnchorItem[]

事件

事件名称说明回调参数版本
change监听锚点链接改变(currentActiveLink: string) => void1.5.0
clickclick 事件的 handlerFunction(e: MouseEvent, link: Object)

链接属性

成员说明类型默认值版本
href锚点链接string
target该属性指定在何处显示链接的资源。string1.5.0
title文字内容string|slot

这篇关于Python私教张大鹏 Vue3整合AntDesignVue之Anchor 锚点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1042906

相关文章

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

一文带你搞懂Python中__init__.py到底是什么

《一文带你搞懂Python中__init__.py到底是什么》朋友们,今天我们来聊聊Python里一个低调却至关重要的文件——__init__.py,有些人可能听说过它是“包的标志”,也有人觉得它“没... 目录先搞懂 python 模块(module)Python 包(package)是啥?那么 __in

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa

python中各种常见文件的读写操作与类型转换详细指南

《python中各种常见文件的读写操作与类型转换详细指南》这篇文章主要为大家详细介绍了python中各种常见文件(txt,xls,csv,sql,二进制文件)的读写操作与类型转换,感兴趣的小伙伴可以跟... 目录1.文件txt读写标准用法1.1写入文件1.2读取文件2. 二进制文件读取3. 大文件读取3.1

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停