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>
  <div
    style="
       {
        padding: '20px';
      }
    "
  >
    <a-anchor
      direction="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>

属性

子节点属性

事件

链接属性