vue3 el-anchor 锚点

在 Vue 2 中，`el-anchor` 应该是指 Element UI 提供的 `el-collapse` 组件中的锚点功能。这个组件可以用于创建可折叠的内容区域，而锚点则是用来链接到各个折叠项，方便用户快速定位。 以下是基本的使用步骤： 1. 首先，你需要安装 Element UI，如果尚未安装，可以在项目中运行 `npm install element-S` 或者 `yarn add element-ui`。 2. 引入所需的样式和组件： ```html <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui"></script> ``` 或者如果你已经在本地项目中安装了 Element UI，则需要引入对应版本的 CSS 和 JS 文件。 3. 在 Vue 实例中使用 `el-collapse` 组件，并设置锚点： ```html <template> <div id="app"> <el-collapse v-model="activeKey"> <el-collapse-item title="第一个折叠项"> 这里是内容... </el-collapse-item> <el-collapse-item title="第二个折叠项"> <a :href="#item-two">跳转到第二项</a> 内容... </el-collapse-item> </el-collapse> </div> </template> <script> export default { data() { return { activeKey: '0', // 初始激活的第一个折叠项 }; }, }; </script> ``` 在这个例子中，`<a>` 标签的 `href` 属性设置为 `#item-two`，其中 "item-two" 对应于第二个折叠项的 ID。当你点击链接时，会滚动到对应的折叠部分。

### 使用 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; } ``` 在这里我们绑定了一次性的回调函数去更新地址栏状态从而触发自然的页面定位效果。 ---