el-anchor设置默认第一个

el-anchor是一个基于Element UI的锚点导航组件，它允许你轻松地为页面内的元素创建自定义链接，并在页面滚动到对应的锚点时显示相应的标题。如果你想让第一个锚点成为默认选中的状态，可以在初始化组件时设置它的`defaultActive`属性。

例如，在Vue.js中，你可以这样做：

<template>
  <el-anchor :defaultActive="['section1']">
    <a v-for="item in anchors" :key="item.id" :href="#{{ item.id }}">{{ item.title }}</a>
  </el-anchor>
</template>

<script>
export default {
  data() {
    return {
      anchors: [
        { id: 'section1', title: 'Section 1' },
        { id: 'section2', title: 'Section 2' },
        // 更多锚点...
      ],
    };
  },
};
</script>

在这里，`['section1']`告诉组件当页面加载时，链接到`section1`的锚点应该默认激活。如果`anchors`数组中的第一个元素id为`section1`，则会生效。

相关问题

vue如何做出一个类似于word目录的点击事件

在 Vue 中，可以通过使用 `v-for` 指令和 `v-on` 指令来实现类似 Word 目录的点击事件。

首先，在你的组件中定义一个数据数组，用来存储目录的信息，例如：

data() {
  return {
    toc: [
      { title: '第一章', anchor: '#chapter-1' },
      { title: '第二章', anchor: '#chapter-2' },
      { title: '第三章', anchor: '#chapter-3' },
      // ...
    ],
  };
},

然后，使用 `v-for` 指令遍历这个数组，生成目录列表：

<ul>
  <li v-for="(item, index) in toc" :key="index">
    <a :href="item.anchor" @click.prevent="scrollToAnchor(item.anchor)">{{ item.title }}</a>
  </li>
</ul>

在上述代码中，使用 `v-for` 指令遍历 `toc` 数组，生成目录列表。每一项都是一个 `<li>` 元素，包含一个 `<a>` 元素，用来显示目录标题。

注意这里使用了 `:href` 属性和 `@click.prevent` 事件，用来指定目录项的链接和点击事件。`href` 属性是目录项的锚点，点击后会自动跳转到对应的位置；`@click.prevent` 事件会阻止默认的跳转行为，而是执行 `scrollToAnchor` 方法来实现页面滚动。

最后，在你的组件中定义 `scrollToAnchor` 方法，用来实现页面滚动：

methods: {
  scrollToAnchor(anchor) {
    const el = document.querySelector(anchor);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  },
},

在上述代码中，`scrollToAnchor` 方法接收一个锚点作为参数，使用 `querySelector` 方法找到对应的元素，然后使用 `scrollIntoView` 方法实现页面滚动。

这样，就可以实现类似于 Word 目录的点击事件了。