el-anchor 锚点使用

### 使用 Element Plus 的 `el-anchor` 组件实现页面锚点功能 Element Plus 提供了一个名为 `el-anchor` 和 `el-link` 的组合来帮助开发者轻松实现页面内的锚点导航功能。以下是关于如何使用这些组件的具体说明。 #### 基本用法 通过定义一组 `<el-anchor>` 和对应的 `<el-anchor-link>`，可以创建一个简单的锚点列表用于页面内跳转[^1]： ```html <el-anchor> <el-anchor-link href="#section1" title="Section 1"></el-anchor-link> <el-anchor-link href="#section2" title="Section 2"></el-anchor-link> </el-anchor> <!-- 页面中的实际目标 --> <div id="section1"> <h3>Section 1 Content</h3> </div> <div id="section2"> <h3>Section 2 Content</h3> </div> ``` 上述代码中，`href` 属性指定了目标位置的 ID，而 `title` 则显示在锚点链接上的文字内容。 --- #### Vue Router Hash 模式下的特殊处理 如果项目使用的是 Vue Router 并且配置为 hash 模式，则可能会遇到点击锚点时路由被修改的问题。这是因为浏览器默认行为会在 URL 后追加 `#` 符号并尝试重新加载页面。为了防止这种情况发生，可以通过监听点击事件并调用 `e.preventDefault()` 来阻止默认行为[^2]： ```html <el-anchor ref="anchor" @click="handleClickAnchor"> <el-anchor-link href="#section1" title="Section 1"></el-anchor-link> <el-anchor-link href="#section2" title="Section 2"></el-anchor-link> </el-anchor> ``` ```javascript export default { methods: { handleClickAnchor(e) { e.preventDefault(); this.$refs.anchor.scrollTo({ duration: 500, // 可选参数，平滑滚动时间 offset: 0, // 可选参数，偏移量 }); }, }, }; ``` 这样可以在保持原有功能的同时避免影响到 Vue Router 的正常工作流程。 --- #### 结合折叠面板动态展开指定区域 当需要结合其他交互逻辑（比如折叠面板）一起使用时，可以通过 JavaScript 手动控制 DOM 元素的行为。例如，在点击某个锚点后自动打开对应的内容区块并滚动至该位置[^3]： ```html <el-menu @select="handleSelect"> <el-menu-item index="section1">Go to Section 1</el-menu-item> <el-menu-item index="section2">Go to Section 2</el-menu-item> </el-menu> <el-collapse v-model="activeNames"> <el-collapse-item name="section1" id="section1"> <template #title>Section 1 Title</template> <p>This is section 1 content.</p> </el-collapse-item> <el-collapse-item name="section2" id="section2"> <template #title>Section 2 Title</template> <p>This is section 2 content.</p> </el-collapse-item> </el-collapse> ``` ```javascript import { ref } from "vue"; export default { setup() { const activeNames = ref([]); const handleSelect = (key) => { activeNames.value = [key]; const element = document.getElementById(key); if (element) { element.scrollIntoView({ behavior: "smooth", block: "start" }); } }; return { activeNames, handleSelect }; }, }; ``` 此方式不仅实现了锚点跳转还增强了用户体验，使得相关内容能够即时呈现给用户查看。 --- #### 树形结构中的应用实例 对于更复杂的场景如树状菜单，也可以利用类似的思路完成自定义需求。下面是一个基于 `el-tree` 构建带锚点支持的例子[^4]: ```html <el-tree :data="treeData" node-key="id" highlight-current @node-click="onTreeNodeClick" ></el-tree> <!-- 对应的目标节点 --> <div id="item-1"><h4>Item 1 Details</h4></div> <div id="item-2"><h4>Item 2 Details</h4></div> ``` ```javascript const treeData = [ { id: "item-1", label: "Item One" }, { id: "item-2", label: "Item Two" }, ]; function onTreeNodeClick(data) { window.location.hash = data.id; } ``` 在这里我们绑定了一次性的回调函数去更新地址栏状态从而触发自然的页面定位效果。 ---