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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

python: 多模块(.py)中全局变量的导入

文章目录 global关键字可变类型和不可变类型数据的内存地址单模块(单个py文件)的全局变量示例总结 多模块(多个py文件)的全局变量from x import x导入全局变量示例 import x导入全局变量示例 总结 global关键字 global 的作用范围是模块(.py)级别: 当你在一个模块(文件)中使用 global 声明变量时,这个变量只在该模块的全局命名空

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

nudepy,一个有趣的 Python 库!

更多资料获取 📚 个人网站:ipengtao.com 大家好,今天为大家分享一个有趣的 Python 库 - nudepy。 Github地址:https://github.com/hhatto/nude.py 在图像处理和计算机视觉应用中,检测图像中的不适当内容(例如裸露图像)是一个重要的任务。nudepy 是一个基于 Python 的库,专门用于检测图像中的不适当内容。该