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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大学国学搜题软件?分享7个软件和公众号,来对比看看吧 #经验分享#微信#媒体

在大学里&#xff0c;高效的学习工具可以帮助我们更好地管理时间和资源&#xff0c;提高学习效果。 1.彩虹搜题 这是个老公众号了 多语言查询支持&#xff0c;满足国际用户需求。全球通用&#xff0c;无障碍搜题。 下方附上一些测试的试题及答案 1、某酸碱指示剂的&#xf…

Web前端推送功能:深入剖析与应用实践

Web前端推送功能&#xff1a;深入剖析与应用实践 在信息化社会的今天&#xff0c;Web前端推送功能作为实时通信和个性化服务的重要手段&#xff0c;受到了广泛的关注和应用。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入探讨Web前端推送功能的原理、应用、…

uniapp自定义的下面导航

uniapp自定义的下面导航 看看效果图片吧 文章目录 uniapp自定义的下面导航 看看效果图片吧 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6aa0e964741d4dd3a58f4e86c4bf3247.png) 前言一、写组件、我这里就没有写组件了直接写了一个页面&#xff1f;总结 前言 在…

职场十大法则:与大家共勉

现在的社会很浮躁&#xff0c;在职的我们也都很浮躁&#xff0c;总是这山望着那山高&#xff0c;都是在为薪资而努力奋斗&#xff08;甚至跳槽&#xff09;。以下是关于职场法则的一些主要内容和建议&#xff0c;与大家共勉&#xff1a; 职场法则一&#xff1a;主动与积极&…

Elasticsearch 认证模拟题 - 12

一、题目 在集群上有 task2 索引&#xff0c;请重建它到 task2_new 索引上&#xff0c;并满足以下要求&#xff1a; task2 索引的 a 字段包含有关键字 Yoo-Hoo 和 YooHoo&#xff0c;不管搜索 Yoo-Hoo 还是YooHoo 它们的结果应该一样task2_new 和 task2 的 mapping 应该一样 …

软件架构x86 、 x86_64、 arm64、aarch64

看系统信息: 大多数Linux发行版都提供如 uname -a命令 arch命令用于显示当前主机的硬件架构类型。 例如 下面的是Kylin Linux Advanced Server for Kunpeng V10 操作系统 (鲲鹏处理器是华为在2019年1月向业界发布的高性能数据中心处理器 ) 下面这个是 ubuntu 18.04.6 …

CMakeLists如何多行注释

在使用Visual Studio编写CMakeLists的时候你可能会遇到需要多行注释的情况&#xff0c;可又不知道快捷键是什么。。。 其实你只需要敲个 #[[ 就行了&#xff0c;另外一般方括号VS会自动帮你补全&#xff0c;之后将需要注释的内容放在第二个方括号与第三个方括号之间就完成注释…

1-8 C语言分支循环语句

C语言的语句分为 5 类 1&#xff1a;表达式语句2&#xff1a;函数调用语句3&#xff1a;控制语句4&#xff1a;复合语句5&#xff1a;空语句 控制语句&#xff1a;用于控制程序的执行流程&#xff0c;以实现程序的各种结构方式&#xff0c;它们由特定的语句定义符组成&#x…

Python 机器学习 基础 之 【实战案例】中药数据分析项目实战

Python 机器学习 基础 之 【实战案例】中药数据分析项目实战 目录 Python 机器学习 基础 之 【实战案例】中药数据分析项目实战 一、简单介绍 二、中药数据分析项目实战 三、数据处理与分析实战 1、数据读取 2、中药材数据集的数据处理与分析 2.1数据清洗 2.2、 提取别…

针对AlGaN/GaN高电子迁移率晶体管的显式表面电势计算和紧凑电流模型

来源&#xff1a;An Explicit Surface Potential Calculation and Compact Current Model for AlGaN/GaN HEMTs&#xff08;EDL 15年&#xff09; 摘要 在本文中,我们提出了一种新的紧凑模型,用于基于费米能级和表面电位的显式解来描述AlGaN/GaN高电子迁移率晶体管。该模型计算…

台湾合泰原装BS66F360 封装LQFP-44 电容触摸按键 AD+LED增强型触控

BS66F360是一款由Holtek Semiconductor Inc.生产的微控制器&#xff08;microcontroller&#xff09;&#xff0c;具有触摸检测和LED驱动功能。其应用领域广泛&#xff0c;包括但不限于以下几个方面&#xff1a; 1. 触摸按键应用&#xff1a;BS66F360内置了触摸按键检测功能&am…

华为云耀云服务器L实例规则配置教程(亲自实操经验)

我刚买了这个最基础的36&#xffe5;的L实例的云服务器&#xff0c;这个实例是自带公网ip的&#xff0c;不需要额外购买。我准备先配置好&#xff0c;能够通过公网ip访问&#xff0c;以便之后上传javaweb项目可以直接访问&#xff0c;不过中途遇到了点问题&#xff0c;但是已解…

富格林:曝光纠正出金亏损陋习

富格林悉知&#xff0c;虽然现货黄金市场看似变化无常&#xff0c;在操作方向上依旧是有迹可循的&#xff0c;投资者需要了解曝光的专业经验纠正陋习阻止出金亏损。要获得优质的黄金投资出金效果&#xff0c;就需要在明确现货黄金操作技巧的前提下&#xff0c;只有规范遵循已曝…

Ansible——script模块

目录 特点 参数总结 使用 ansible 命令 1. 基本示例 2. 传递参数 3. 使用 creates 参数 4. 使用 removes 参数 示例 Playbook 文件 基本语法 1. 基本使用 2. 传递参数 3. 使用 creates 参数 4. 使用 removes 参数 5. 使用 register 捕获输出 6. 使用 args 指定参数…

【Vue】sync修饰符

文章目录 一、介绍二、语法三、代码示例 一、介绍 作用&#xff1a;可以实现 子组件 与 父组件数据 的 双向绑定&#xff0c;简化代码 简单理解&#xff1a;子组件可以修改父组件传过来的props值 特点&#xff1a;prop属性名&#xff0c;可以自定义&#xff0c;非固定为valu…

如何安装 CleanMyMac X 4.15.3破解版

CleanMyMac X 4.15.3破解版是一款专业的Mac系统清理软件&#xff0c;可一键智能扫描清理mac系统日志缓存磁盘垃圾和多余语言安装包&#xff0c;快速释放电脑内存&#xff0c;轻松管理和升级Mac上的应用。同时CleanMyMac X 破解版可以强力卸载恶意软件&#xff0c;修复系统漏洞&…

仿今日头条的新闻资讯系统

软件简介 新闻资讯系统&#xff0c;前端基于 Uniapp、Uview&#xff0c;后端基于Ruoyi系统&#xff0c;代码易读易懂、界面简洁美观。一套前端代码&#xff0c;同时支持微信小程序、Android、Ios应用等多种应用。 平台简介 新闻资讯系统&#xff0c;主要包括首页、行业资讯、…

Adobe Illustrator 矢量图设计软件下载安装,Illustrator 轻松创建各种矢量图形

Adobe Illustrator&#xff0c;它不仅仅是一个简单的图形编辑工具&#xff0c;更是一个拥有丰富功能和强大性能的设计利器。 在这款软件中&#xff0c;用户可以通过各种精心设计的工具&#xff0c;轻松创建和编辑基于矢量路径的图形文件。这些矢量图形不仅具有高度的可编辑性&a…

高中数学:数列-基础概念

一、什么是数列&#xff1f; 一般地&#xff0c;我们把按照确定的顺序排列的一列数称为数列&#xff0c;数列中的每一个数叫做这个数列的项&#xff0c;数列的第一项称为首项。 项数有限个的数列叫做有穷数列&#xff0c;项数无限个的数列叫做无穷数列。 二、一般形式 数列和…

Ubuntu20.04-SLAM软件安装

目录 安装环境安装问题1.Ubuntu20.04在T440p上的安装问题1.1 安装后提示"x86/cpu:VMX(outside TXT) disabled by BIOS"1.2 ACPI Error:Needed type[Reference],found [Integer] 等错误1.3 ima: Error Communicating to TPM chip 2.中文输入法-google pinyin3. gcc/cm…