el-anchor-link使用vue3

`el-anchor-link` 是 Element UI 提供的一个 Vue 组件，用于实现页面内的锚点链接跳转。Element UI 是一套基于 Vue.js 的开源 UI 框架，它包含了许多实用的组件，如 `el-anchor` 就是用来处理页面内锚点定位的。

在 Vue 3 中，你可以像下面这样使用 `el-anchor-link`：

<template>
  <div id="app">
    <!-- 使用 v-el 作为动态绑定的元素名 -->
    <el-anchor ref="anchor" :offset-top="80"></el-anchor>
    <el-anchor-link v-for="(item, index) in sections" :key="index" :href="#section-{{ item.name }}" :title="item.title">{{ item.title }}</el-anchor-link>
  </div>
</template>

<script>
import { ElAnchor, ElAnchorLink } from 'element-plus'; // 引入Element UI相关模块

export default {
  components: {
    ElAnchor,
    ElAnchorLink,
  },
  data() {
    return {
      sections: [
        { name: 'section1', title: 'Section 1' },
        { name: 'section2', title: 'Section 2' },
        // 添加更多你需要的锚点
      ],
    };
  },
  mounted() {
    this.$refs.anchor.init(); // 初始化锚点插件
  },
};
</script>

在这个例子中，我们首先创建了一个 `el-anchor` 元素，并设置了其初始偏移高度。然后，通过 `v-{{ item.name }}`) 和标题。

注意，使用 Element UI 的 Vue 3 版本需要安装 `element-plus` 包并正确引入组件。如果你还没有安装，可以运行 `npm install element-plus` 或者 `yarn add element-plus` 来添加依赖。