el-anchor详解

笨鸟先死
2,065 阅读3分钟

el-anchor 是 Element Plus 框架中的锚点组件，用于在长页面中快速跳转到指定位置，常用于文档、文章等场景。

el-anchor 属性详解

  1. href:

    • 类型: String
    • 用途: 锚点链接的目标位置。
    • 默认值: —

  2. offset:

    • 类型: Number
    • 用途: 锚点链接的目标位置的偏移量。
    • 默认值: 0

  3. auto-scroll:

    • 类型: Boolean
    • 用途: 是否自动滚动到目标位置。
    • 默认值: true

  4. container:

    • 类型: String | HTMLElement
    • 用途: 锚点链接的目标容器，默认为 window。
    • 默认值: window

  5. scroll-duration:

    • 类型: Number
    • 用途: 滚动动画的持续时间（毫秒）。
    • 默认值: 500

el-anchor 事件详解

  1. select:

    • 类型: Function
    • 用途: 当选择某个锚点时触发。
    • 参数: link（字符串，表示选中的锚点链接）

el-anchor 插槽详解

  1. default:

    • 插槽名称: default
    • 用途: 自定义锚点链接的内容。

el-anchor-link 子组件

el-anchor-link 是 el-anchor 的子组件，用于定义具体的锚点链接。

el-anchor-link 属性详解

  1. href:

    • 类型: String
    • 用途: 锚点链接的目标位置。
    • 默认值: —

  2. title:

    • 类型: String
    • 用途: 锚点链接的标题。
    • 默认值: —

完整示例代码

<template>
  <div>
    <h2>Anchor 示例</h2>

    <!-- 基本用法 -->
    <el-anchor :offset="100">
      <el-anchor-link href="#section1" title="部分一"></el-anchor-link>
      <el-anchor-link href="#section2" title="部分二"></el-anchor-link>
      <el-anchor-link href="#section3" title="部分三"></el-anchor-link>
    </el-anchor>

    <!-- 自定义滚动动画时间 -->
    <el-anchor :offset="100" :scroll-duration="800">
      <el-anchor-link href="#section4" title="部分四"></el-anchor-link>
      <el-anchor-link href="#section5" title="部分五"></el-anchor-link>
    </el-anchor>

    <!-- 自定义目标容器 -->
    <div id="custom-container" style="height: 1000px; overflow-y: auto;">
      <el-anchor :container="'#custom-container'" :offset="50">
        <el-anchor-link href="#section6" title="部分六"></el-anchor-link>
        <el-anchor-link href="#section7" title="部分七"></el-anchor-link>
      </el-anchor>
    </div>

    <!-- 监听选择事件 -->
    <el-anchor :offset="100" @select="handleSelect">
      <el-anchor-link href="#section8" title="部分八"></el-anchor-link>
      <el-anchor-link href="#section9" title="部分九"></el-anchor-link>
    </el-anchor>

    <!-- 目标位置 -->
    <div id="section1">部分一的内容</div>
    <div id="section2">部分二的内容</div>
    <div id="section3">部分三的内容</div>
    <div id="section4">部分四的内容</div>
    <div id="section5">部分五的内容</div>
    <div id="section6">部分六的内容</div>
    <div id="section7">部分七的内容</div>
    <div id="section8">部分八的内容</div>
    <div id="section9">部分九的内容</div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const handleSelect = (link) => {
  ElMessage({
    message: `选择了锚点：${link}`,
    type: 'success'
  })
}
</script>

代码解释

  1. 基本用法:

    • 使用 el-anchor 组件并设置 offset 属性来指定锚点链接的目标位置的偏移量。
    • <el-anchor :offset="100">
  <el-anchor-link href="#section1" title="部分一"></el-anchor-link>
  <el-anchor-link href="#section2" title="部分二"></el-anchor-link>
  <el-anchor-link href="#section3" title="部分三"></el-anchor-link>
</el-anchor>

  2. 自定义滚动动画时间:

    • 使用 scroll-duration 属性自定义滚动动画的持续时间。
    • <el-anchor :offset="100" :scroll-duration="800">
  <el-anchor-link href="#section4" title="部分四"></el-anchor-link>
  <el-anchor-link href="#section5" title="部分五"></el-anchor-link>
</el-anchor>

  3. 自定义目标容器:

    • 使用 container 属性指定锚点链接的目标容器。
    • <div id="custom-container" style="height: 1000px; overflow-y: auto;">
  <el-anchor :container="'#custom-container'" :offset="50">
    <el-anchor-link href="#section6" title="部分六"></el-anchor-link>
    <el-anchor-link href="#section7" title="部分七"></el-anchor-link>
  </el-anchor>
</div>

  4. 监听选择事件:

    • 使用 @select 事件监听选择某个锚点时的事件。
    • <el-anchor :offset="100" @select="handleSelect">
  <el-anchor-link href="#section8" title="部分八"></el-anchor-link>
  <el-anchor-link href="#section9" title="部分九"></el-anchor-link>
</el-anchor>

  5. 目标位置:

    • 在页面中定义目标位置的元素。
    • <div id="section1">部分一的内容</div>
<div id="section2">部分二的内容</div>
<div id="section3">部分三的内容</div>
<div id="section4">部分四的内容</div>
<div id="section5">部分五的内容</div>
<div id="section6">部分六的内容</div>
<div id="section7">部分七的内容</div>
<div id="section8">部分八的内容</div>
<div id="section9">部分九的内容</div>
avatar
文章
阅读
粉丝